标签：代码 xtend 提交 var mit height 优先 不同的 component
在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={this.state.value} onChange={this.handleChange} /> </label> <input type="submit" value="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表单和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={this.state.value} onChange={this.handleChange} style={{color:‘red‘,width:‘400px‘,height:‘15px‘}} /> </label> <input type="submit" value="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={this.state.value} onChange={this.handleChange} style={myStyle} /> </label> <input type="submit" value="Submit" /> </form> );
例子如下所示：
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={this.state.value} onChange={this.handleChange}> <option value="grapefruit">Grapefruit</option> <option value="lime">Lime</option> <option value="coconut">Coconut</option> <option value="mango">Mango</option> </select> </label> <input type="submit" value="Submit" /> </form> ); } } ReactDOM.render( <FlavorForm />, document.getElementById(‘root‘)
);
标签：代码 xtend 提交 var mit height 优先 不同的 component
原文地址：http://www.cnblogs.com/zhuzhenwei918/p/6361398.html
