React（脚手架）——create-react-app撸api

首先给大家弥补一个错误，也是因为自己知识点不到位，查阅资料才发现的哈！

约束性和非约束性组件

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

约束性组件：<input value={this.state.a} onChange={this.handleChange} /> 这里要注意有value 必须有onChange。那么这里的value不再是一个写死的值，他是this.state.a并且由this.handleChange管理，此时的value就不是用户输入的内容而是onChange事件触发之后重新触发的渲染

如果我们需要形成mvvm类似的效果，就需要使用value onChange，如果只是单纯的mv，直接使用defaultValue
概念比较抽象，记不住算了！！！╭(╯^╰)╮

接下来写一个稍微有点可能像实际开发的

    import React,{Component} from 'react'
    class New extends Component {
        constructor(props) {
            super(props);
            this.state = { 
                msg:'表单',
                name:'',
                sex:1,
                citys:[ //select
                    '北京','上海','广州'
                ],
                hobby:[  //checkbox
                    {
                         'title':'睡觉',
                         'checked':true
                    },
                    {
                        'title':'吃饭',
                        'checked':true
                   },
                   {
                    'title':'打游戏',
                    'checked':true
                     }
                ]
            };
        }

        
        render() {
            return (
            <div> 
                
            </div>
            );
        }
    }

    export default New;

这是我的初始化代码可以copy一哈，稍微加点代码运用一下

    import React,{Component} from 'react'
    class New extends Component {
        constructor(props) {
            super(props);
            this.state = { 
                msg:'表单',
                name:'',
                sex:1,
                citys:[ //select
                    '北京','上海','广州'
                ],
                hobby:[  //checkbox
                    {
                         'title':'睡觉',
                         'checked':true
                    },
                    {
                        'title':'吃饭',
                        'checked':true
                   },
                   {
                    'title':'打游戏',
                    'checked':true
                     }
                ]
            };
        }
        
        handleName(ev){
            this.setState({
                name:ev.target.value
            })
        }

        handleSubmit(ev){
          ev.preventDefault()
          console.log(this.state.name)
        }
        
        handleSex(ev){
            this.setState({
                sex:ev.target.value
            })
        }
        render() {
            return (
            <div> 
                 <h2>{this.state.msg}</h2>
                 <form onSubmit={this.handleSubmit.bind(this)}>
                      用户名：<input value={this.state.name} onChange={this.handleName.bind(this)} />

                      性别： <input type="radio" value="1" checked={this.state.sex==1} onChange={this.handleSex.bind(this)} />男
                             <input type="radio" value="2" checked={this.state.sex==2} onChange={this.handleSex.bind(this)} />女
                           
                              <br/><br/><br/>
                              <input type="submit"  defaultValue="提交"/>
                 </form>
            </div>
            );
        }
    }

    export default New;

我觉得这个是比较简单，checked这种判断方法完全可以按照自己喜欢的设置，我比较懒就喜欢设置数字，看不懂多看几遍就没问题的，当然ev.preventDefault（）是阻止表单提交的默认事件

    import React,{Component} from 'react'
    class New extends Component {
        constructor(props) {
            super(props);
            this.state = { 
                msg:'表单',
                name:'',
                city:'',
                sex:1,
                citys:[ //select
                    '北京','上海','广州'
                ],
                hobby:[  //checkbox
                    {
                         'title':'睡觉',
                         'checked':true
                    },
                    {
                        'title':'吃饭',
                        'checked':true
                   },
                   {
                    'title':'打游戏',
                    'checked':true
                     }
                ]
            };
        }
        
        handleName(ev){
            this.setState({
                name:ev.target.value
            })
        }

        handleSubmit(ev){
          ev.preventDefault()
          console.log(this.state.name,this.state.sex,this.state.city)
        }
        
        handleSex(ev){
            this.setState({
                sex:ev.target.value
            })
        }

        handleCity(ev){
            this.setState({
                city:ev.target.value
            })
        }
        render() {
            return (
            <div> 
                 <h2>{this.state.msg}</h2>
                 <form onSubmit={this.handleSubmit.bind(this)}>
                      用户名：<input value={this.state.name} onChange={this.handleName.bind(this)} />

                      性别： <input type="radio" value="1" checked={this.state.sex==1} onChange={this.handleSex.bind(this)} />男
                             <input type="radio" value="2" checked={this.state.sex==2} onChange={this.handleSex.bind(this)} />女
                      居住城市：<select value={this.state.city} onChange={this.handleCity.bind(this)}>
                                  {
                                      this.state.citys.map((v)=>{
                                          return <option value={v} key={v}>{v}</option>
                                      })
                                  }
                              </select>     
                              <br/><br/><br/>
                              <input type="submit"  defaultValue="提交"/>
                 </form>
            </div>
            );
        }
    }

    export default New;

需要注意的就是select的绑定，它是在select标签不是在option标签，可能大家没我这么笨，我经常搞错

    import React,{Component} from 'react'
    class New extends Component {
        constructor(props) {
            super(props);
            this.state = { 
                msg:'表单',
                name:'',
                city:'',
                sex:1,
                citys:[ //select
                    '北京','上海','广州'
                ],
                hobby:[  //checkbox
                    {
                         'title':'睡觉',
                         'checked':true
                    },
                    {
                        'title':'吃饭',
                        'checked':true
                   },
                   {
                    'title':'打游戏',
                    'checked':true
                     }
                ]
            };
        }
        
        handleName(ev){
            this.setState({
                name:ev.target.value
            })
        }

        handleSubmit(ev){
          ev.preventDefault()
          console.log(this.state.name,this.state.sex,this.state.city,this.state.hobby)
        }
        
        handleSex(ev){
            this.setState({
                sex:ev.target.value
            })
        }

        handleCity(ev){
            this.setState({
                city:ev.target.value
            })
        }

        handleHobby(i){
            var hobby=this.state.hobby
            hobby[i].checked=!hobby[i].checked
            this.setState({
                hobby:hobby
            })
        }
        render() {
            return (
            <div> 
                 <h2>{this.state.msg}</h2>
                 <form onSubmit={this.handleSubmit.bind(this)}>
                      用户名：<input value={this.state.name} onChange={this.handleName.bind(this)} /><br/><br/>

                      性别： <input type="radio" value="1" checked={this.state.sex==1} onChange={this.handleSex.bind(this)} />男
                             <input type="radio" value="2" checked={this.state.sex==2} onChange={this.handleSex.bind(this)} />女<br/><br/>
                      居住城市：<select value={this.state.city} onChange={this.handleCity.bind(this)}>
                                  {
                                      this.state.citys.map((v)=>{
                                          return <option value={v} key={v}>{v}</option>
                                      })
                                  }
                              </select>  <br/><br/>
                       爱好：{
                           this.state.hobby.map((v,i)=>{
                               return(
                                   
                                <div key={i}>
                                    {v.title}<input type="checkbox" checked={v.checked}  onChange={this.handleHobby.bind(this,i)}/>
                                </div>
                               )
                           })
                       }        
                                          
                              <br/><br/><br/>
                              <input type="submit"  defaultValue="提交"/>
                 </form>
            </div>
            );
        }
    }

    export default New;

最后一个有点小绕，其实就是之前的bind复用，通过bind传递参数用来判断当前改变的是哪个值，然后改变state中的状态！打印的就是向后台传递的数据或者操作的值！