首页 > 代码库 > React之表单
React之表单
第一部分：表单基础
在React中，修改表单的唯一途径是使用setState方法。举例如下：
class NameForm extends React.Component { constructor(props) { super(props); this.state = {value: ‘‘}; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } handleChange(event) { this.setState({value: event.target.value}); } handleSubmit(event) { alert(‘A name was submitted: ‘ + this.state.value); event.preventDefault(); } render() { return ( <form onSubmit={this.handleSubmit}> <label> Name: <input type="text" value=http://www.mamicode.com/{this.state.value} onChange={this.handleChange} /> </label> <input type="submit" value=http://www.mamicode.com/"Submit" /> </form> ); }}ReactDOM.render( <NameForm />, document.getElementById(‘root‘));
在codepen的运行代码连接
我们可以看出其运行逻辑：首先将组建渲染到页面，及执行了render(),此时获取的value为空，当我们输入数据时，触发handleChange函数（注意：要提前绑定在当前环境下），然后设置state中的value为用户当前输入值，于是表单元素input获取到最新的state并使用虚拟dom与真实dom作对比，只更新有变化的dom... 当点击提交按钮时，触发了handleSubmit函数。
值得注意的是：在handleSubmit函数中，我们使用event.preventDefault()阻止了默认行为，即：提交表单后，不会自动reset表单，而是保留之前的用户数据！
第二部分：textarea表单
textarea表单和Input表单本身是没有什么区别的，举例如下所示：
class EssayForm extends React.Component { constructor(props) { super(props); this.state = { value: ‘Please write an essay about your favorite DOM element.‘ }; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } handleChange(event) { this.setState({value: event.target.value}); } handleSubmit(event) { alert(‘An essay was submitted: ‘ + this.state.value); event.preventDefault(); } render() { return ( <form onSubmit={this.handleSubmit}> <label> Name: <textarea value=http://www.mamicode.com/{this.state.value} onChange={this.handleChange} style={{color:‘red‘,width:‘400px‘,height:‘15px‘}} /> </label> <input type="submit" value=http://www.mamicode.com/"Submit" /> </form> ); }}ReactDOM.render(<EssayForm/>,document.getElementById(‘root‘));
这里我设置了初始状态，所以一开始我们就可以在textarea中看到内容，稍有不同的是，我还在textarea中设置了样式（注意：要用两个curly brace,外面的表示包含js对象，里面的表示包含一个样式对象，当然我们也可以在外面先定义对象然后再传进来）。
另外，我们还可以直接在css中设置样式，如下所示：
textarea{ background:red; color:white !important;}
这样，背景颜色为红色，字体为白色。
注意：因为在React中设置的style是行内样式，优先级较高，故在外联样式中无法覆盖，只有通过使用!important的方式才能成功覆盖。
另外，将样式对象传入的方法如下：
render() { var myStyle = { width:‘400px‘, height:‘15px‘, color:‘red‘ }; return ( <form onSubmit={this.handleSubmit}> <label> Name: <textarea value=http://www.mamicode.com/{this.state.value} onChange={this.handleChange} style={myStyle} /> </label> <input type="submit" value=http://www.mamicode.com/"Submit" /> </form> );
第三部分：select表单
例子如下所示：
class FlavorForm extends React.Component { constructor(props) { super(props); this.state = {value: ‘coconut‘}; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } handleChange(event) { this.setState({value: event.target.value}); } handleSubmit(event) { alert(‘Your favorite flavor is: ‘ + this.state.value); event.preventDefault(); } render() { return ( <form onSubmit={this.handleSubmit}> <label> Pick your favorite La Croix flavor: <select value=http://www.mamicode.com/{this.state.value} onChange={this.handleChange}> <option value=http://www.mamicode.com/"grapefruit">Grapefruit</option> <option value=http://www.mamicode.com/"lime">Lime</option> <option value=http://www.mamicode.com/"coconut">Coconut</option> <option value=http://www.mamicode.com/"mango">Mango</option> </select> </label> <input type="submit" value=http://www.mamicode.com/"Submit" /> </form> ); }}ReactDOM.render( <FlavorForm />, document.getElementById(‘root‘)
);
连接。
React之表单
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。