06 React表单详解 约束性和非约束性组件 input text checkbox radio select textarea 以及获取表单的内容

一、value报错

报错：我们用value绑定动态的数据的话，必须要监听onChange事件。
如果不监听onChange的话，就要绑定value，那就把value改成defaultValue

二、MVVM，MV

import React, { Component } from "react";
import "../assets/css/index.css";

class Home extends Component {
  //固定写法
  constructor(props) {
    super(props);

    this.state = {
      username:"111111",
    };

  }

  handleUsername = (e)=>{
    this.setState({
      username:e.target.value
    });
  }

 
  render() {
    return (
      <div>
        <h1>React表单</h1>
        
        {/* 
          react 不属于mvvm
          但是我们模拟出了类似于vue的mvvm

          MVVM是Model-View-ViewModel的缩写。

          单向绑定非常简单，就是把Model绑定到View，当我们用JavaScript代码更新Model时，View就会自动更新。

          有单向绑定，就有双向绑定。如果用户更新了View，Model的数据也自动被更新了，这种情况就是双向绑定。

          什么情况下用户可以更新View呢？填写表单就是一个最直接的例子。
          当用户填写表单时，View的状态就被更新	了，如果此时MVVM框架可以自动更新Model的状态，那就相当于我们把Model和View做了双向绑定：

        */}

        <input type="text" value={this.state.username} onChange={this.handleUsername}/> 
 
        {this.state.username}

        <br/>

        {/*  MV  Model绑定到View */}
        <input  type="text" defaultValue={this.state.username} /> 
 

      </div>
    );
  }
}

export default Home;

三、约束性组件和非约束性组件

import React, { Component } from "react";
import "../assets/css/index.css";


/*
约束性组件和非约束性组件

      非约束性组件：<input type="text" defaultValue="a" />  
      
      这个 defaultValue  其实就是原生DOM中的 value 属性。
      
      这样写出来的组件，其value值就是用户输入的内容，React完全不管理输入的过程。




      约束性组件： <input type="text" value={this.state.username} onChange={this.handleUsername}/> 

      这里，value属性不再是一个写死的值，他是 this.state.username,this.state.username 是由  this.handleUsername 负责管理的。

      这个时候实际上 input 的 value 根本不是用户输入的内容。
      
      而是onChange 事件触发之后，由于 this.setState 导致了一次重新渲染。
      
      不过React会优化这个渲染过程


*/



class Home extends Component {
  //固定写法
  constructor(props) {
    super(props);

    this.state = {
      username:"111111",
    };

  }

  handleUsername = (e)=>{
    this.setState({
      username:e.target.value
    });
  }

 
  render() {
    return (
      <div>
        <h1>React表单</h1>
        {/* MVVM  */}
        <input type="text" value={this.state.username} onChange={this.handleUsername}/> 
 
        {this.state.username}

        <br/>

        {/*  MV */}
        <input  type="text" defaultValue={this.state.username} /> 
 
      </div>
    );
  }
}

export default Home;

四、React 监听form提交事件以及阻止默认行为

五、React 表单 text

六、React 表单 radio

七、React 表单 checkbox

八、React 表单 select

九、React 表单 textarea

十、整体的代码

import React, { Component } from "react";

class ReactForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      msg: "React表单",
      name: "",
      email: "",
      sex: 1,
      city: "",
      citys: ["北京", "上海", "深圳"],
      hobby: [
        {
          title: "睡觉",
          checked: true,
        },
        {
          title: "吃饭",
          checked: false,
        },
        {
          title: "打豆豆",
          checked: true,
        },
      ],
      info: "",
    };
  }

  handleSubmit = (e) => {
    //表单可以不写form。
    //如果写form的话，要阻止默认行为
    e.preventDefault();

    console.log("name", this.state.name);
    console.log("sex", this.state.sex);
    console.log("city", this.state.city);
    console.log("hobby", this.state.hobby);
    console.log("info", this.state.info);
  };

  handleName = (e) => {
    this.setState({
      name: e.target.value,
    });
  };

  handleSex = (e) => {
    this.setState({
      sex: e.target.value,
    });
  };

  handleCity = (e) =>{
    this.setState({
       city: e.target.value,
    });
  }

  handleHobby = (key) =>{
     var hobby = this.state.hobby;
     hobby[key].checked = !hobby[key].checked; 
     this.setState({
        hobby: hobby
     });
  }

  handleInfo = (e) => {
    this.setState({
        info: e.target.value,
    });    
  }

  render() {
    return (
      <div>
        <h2>{this.state.msg}</h2>

        <form onSubmit={this.handleSubmit}>

          用户名：
          <input
            type="text"
            value={this.state.name}
            onChange={this.handleName}
          />

          <br />
          <br />

          性别：
          <input type="radio" value="1"  checked={this.state.sex == 1} onChange={this.handleSex}/>男
          <input type="radio" value="0" checked={this.state.sex == 0} onChange={this.handleSex}/>女
         
         
          <br />
          <br />

          居住城市：
          <select  value={this.state.city} onChange={this.handleCity}>
                {
                   this.state.citys.map((value,key)=>{
                      return  <option  key={key}>{value}</option>
                   })
                }
                
           </select>


          <br />
          <br />

          爱好：
          {
                this.state.hobby.map((value,key)=>{
                     return (
                          <span key={key}>
                               {value.title}  <input type="checkbox" checked={value.checked}  
                               onChange={this.handleHobby.bind(this,key)}/> 
                          </span>
                     )
                })
          }

          <br />
          <br />

          备注：
          <textarea  value={this.state.info} onChange={this.handleInfo} />

          <br />
          <br />

          <input type="submit" defaultValue="提交" />
        </form>
      </div>
    );
  }
}

export default ReactForm;