react笔记 8-21 约束性 表单

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

非约束性组件
<input  type="text"  name=""  defaultValue={this.state.msg}></input>
这里他的value是用户输入的值   并没有执行操作 只是获取到了msg的值  用户输入不会改变数据
非约束性组件需要使用defaultValue获取数据  否则会报错

约束性组件
<input  type="text"  name="" onChange={this.inputChange} value={this.state.msg}></input>
这里的value绑定了msg  因此由react管理  不可随意更改 由msg的改变而改变
当msg改变后  state会重新渲染

2、表单 获取表单数据、修改数据

均采取 value绑定数据 onChange 通过change event对象获取数据  修改state中的数据

class List extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            msg: "react表单",
            name:"",
            sex:"1",
            city:"",
            citys:[
                '北京','上海','深圳'
            ],
            hobby:[
                {
                    "title":"睡觉",
                    "checked":true
                },
                {
                    "title":"吃饭",
                    "checked":false
                },
                {
                    "title":"写代码",
                    "checked":true
                },
            ],
            info:'',
        }
    }
    handelSubmit=(e)=>{
        e.preventDefault();
        console.log(this.state.sex);
        console.log(this.state.name);
        console.log(this.state.city);
        console.log(this.state.hobby);
        console.log(this.state.info);

    }
    handelName=(e)=>{
        this.setState({
            name:e.target.value
        })
    }
    handelSex=(e)=>{
        this.setState({
            sex:e.target.value
        })
    }
    handelCity=(e)=>{
        this.setState({
            city:e.target.value  
        })
    }
    handelHobby=(key)=>{
        var hobby=this.state.hobby;
        hobby[key].checked =!hobby[key].checked
        this.setState({
            hobby:hobby
        })
    }
    handelInfo=(e)=>{
        this.setState({
            info:e.target.value
        })
    }
   
}

render部分

<form onSubmit={this.handelSubmit}>
            用户名: <input type="text" value={this.state.name} onChange={this.handelName} /><br />

            男 <input type="radio" value="1" checked={this.state.sex == 1} onChange={this.handelSex} />
            女 <input type="radio" value="2" checked={this.state.sex == 2} onChange={this.handelSex} /> <br />
radio通过value的1和2 于数据中sex 的1和2判断  如果相等则选中  修改sex sex只能为1 或者2 
每次点击通过change事件带着value把sex中的数据修改为1或者2 
            居住城市:
            <select name="" value={this.state.city} onChange={this.handelCity}>
                {
                    this.state.citys.map(function (val, key) {
                        return (
                            <option key={key}>{val}</option>

                        )
                    })
                }
            </select><br />
select中option渲染出来不能直接绑定  需要绑定select标签获取数据
            爱好：
            {
                this.state.hobby.map((val, key) => {
                    return (
                        <span key={key}>
                            {val.title} <input type="checkbox" checked={val.checked} onChange={this.handelHobby.bind(this, key)} />

                        </span>

                    )
                })
            }
多选按钮需要将key传回通过key判断是数组中哪一个对象 这里通过bind将key和this传回(this必须写)
            <br />
            <textarea name="" id="" cols="30" rows="10" value={this.state.info} onChange={this.handelInfo} />
texteara写为单标签  于input绑定方式相同
            <br />

            <input type="submit" defaultValue="提交" />
直接写value不绑定数据会报错 因此写defaultValue
        </form>

也可以选择使用ref