首页 > 代码库 > react表单
react表单
和html一样, react也提供了许多的可供交互的组件, 这些组件有 input, textarea, option等.
react 提供的这些组件与其他的组件又有一些不同, 其他的组件多数用于展示信息, 而这些组件可以通过用户的操作进行交互.
那么input, checked, selected 主要是在哪些地方可以使用呢?
1. value, 支持<input> 和 <textarea>两种组件.
2. checked 支持<input> 类型为checkbox和radio两种.
3. select 支持<option>组件.
备注: 与传统的html不同的是, 传统的<textarea>的值是直接写在<textarea>的子节点上, 比如:
<textarea>this is textarea value</textarea>
但是react的<textarea>组件的值是写在它的value属性上面的, 如:
<textarea value="http://www.mamicode.com/this is react textarea value" />
他们都可以调用一个共同的方法, 那就是onChange方法, 该方法在value值发生改变时触发.
与用户进行交互, 就是当用户输入了值之后, 动态改变state的值, 有两种方式, 一种是带有控制器的组件, 一种是没有控制器的组件, 下面具体讲解.
1.有控制器的组件:
input 或 textarea, option的值直接绑定state
class Main extends Component{ constructor(props){ super(props); this.state = { username : "zhangsan " }; this.handleUsername = this.handleUsername.bind(this); }
// 处理用户名输入 handleUsername(event){ this.setState({ username : event.target.value }) } render(){ return( <input value=http://www.mamicode.com/{this.state.username} onChange={this.handleUsername} />>export default Main;
在这个例子中, 必须给input添加onChange事件, 因为它的值绑定了this.state.username, 如果不通过setState改变state.username的值的话, 不管如何输入, input中的内容是不会发生改变的.
2. 没有控制器的组件:
class Main extends Component{ constructor(props){ super(props); this.state = { username : "zhangsan " }; this.handleUsername = this.handleUsername.bind(this); } // 处理用户名输入 handleUsername(event){ this.setState({ username : event.target.value }) } render(){ return( <input defaultValue="http://www.mamicode.com/haha" onChange={this.handleUsername} /> ) } } export default Main;
在这个例子里面, 我们没有把state.username直接绑定到input上面, 但是我们还是调用了onChange事件, 因为如果我们不手动改变state.username的值, 虽然输入框中的内容发生改变了, 但是我们获取到的永远都是设置的默认的"haha"那个值.
defaultVaule, defaultChecked 只用于组件的初始化渲染.
在使用select组件时, 为了方便操作, select 的value的值等于option的值, 则表示这个选项被选中了.
<select value="http://www.mamicode.com/B"> <option value="http://www.mamicode.com/A">Apple</option> <option value="http://www.mamicode.com/B">Banana</option> <option value="http://www.mamicode.com/C">Cranberry</option> </select>
select 的值允许是一个数组, 并设置multiple属性为true, 则表示多个option被选中:
<select multiple={true} value=http://www.mamicode.com/{["B","C"]}>
<option value="http://www.mamicode.com/A">Apple</option>
<option value="http://www.mamicode.com/B">Banana</option>
<option value="http://www.mamicode.com/C">Cranberry</option>
</select>
如果想要手动触发操作, 就需要给对应的地点多加一个ref熟悉, 通过ref找到对应的节点, 然后触发对应的操作, 比如,form.submit();
class Submit extends Component{
constructor(props){
super(props);
this.handleUsername = this.handleUsername.bind(this);
this.submit = this.submit.bind(this);
this.state = {
username:""
};
}
handleUsername(event){
this.setState({
username:event.target.value
})
}
// 提交
submit(){
this.form.submit();
}
render(){
return(
<form ref="form">
<input type="text" value=http://www.mamicode.com/{this.state.username} onChange={this.handleUsername} />
<button onClick={this.submit}>提交</button>
</form>
)
}
}
export default Submit;
参考链接: http://reactjs.cn/react/docs/forms.html
react表单