美文网首页
React(脚手架)——create-react-app撸api

React(脚手架)——create-react-app撸api

作者: 感觉不错哦 | 来源:发表于2019-03-06 14:49 被阅读4次
    首先给大家弥补一个错误,也是因为自己知识点不到位,查阅资料才发现的哈!
    约束性和非约束性组件

    非约束性:<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中的状态!打印的就是向后台传递的数据或者操作的值!

    相关文章

      网友评论

          本文标题:React(脚手架)——create-react-app撸api

          本文链接:https://www.haomeiwen.com/subject/yxptpqtx.html