React基础篇-表单相关

1.受控组件

//使用 state 和 setState 来获取和修改表单元素的value值
calss FormInput extends React.component{
    constructor(props){
        super(props);
        this.state={intValue:"123"};
        this.changeFn=this.changeFn.bind(this);
    }
    changeFn(event){
        this.setState({ intValue:event.target.value })
    }
    render(){
        return (
            <input value={this.state.intValue} onChange={changeFn} />
        )
    }
}
ReactDOM.render(
    <formInput/>,
    document.getElementById("root")
)

2.特殊表单

1、textarea元素：<textarea>会用value属性来代替文本域内容

<form>
    <textarea value={this.state.value} onChange={this.handleChange} />
</form>

2、select元素：根select标签上用value属性来表示选中项

<form>
    <select value={this.state.value} onChange={this.handleChange}>
        <option value="value001">1</option>
        <option value="value002">2</option>
        <option value="value003">3</option>
    </select>
</form>

3.注意事项

1、input-file标签是一个非受控组件，其value是只读并非可修改的；

2、多个同类表单元素，可以通过name属性进行区分；