【React】八、表单

1. 在 HTML 中，表单元素（如、 和 <select>）之类的表单元素通常自己维护 state，并根据用户输入进行更新。而在 React 中，可变状态（mutable state）通常保存在组件的 state 属性中，并且只能通过使用 setState()来更新。<br> 我们可以把两者结合起来，使 React 的 state 成为“唯一数据源”。渲染表单的 React 组件还控制着用户输入过程中表单发生的操作。被 React 以这种方式控制取值的表单输入元素就叫做“受控组件”</li> <li>input</li> </ol> <pre><code>render() { return ( <form onSubmit={this.handleSubmit}> <label> 名字: <input type="text" value={this.state.value} onChange={this.handleChange} /> </label> <input type="submit" value="提交" /> </form> ); } </code></pre> <ol start="2"> <li>textarea</li> </ol> <pre><code>render() { return ( <form onSubmit={this.handleSubmit}> <label> 文章: <textarea value={this.state.value} onChange={this.handleChange} /> </label> <input type="submit" value="提交" /> </form> ); } </code></pre> <ol start="3"> <li>select</li> </ol> <pre><code>render() { return ( <form onSubmit={this.handleSubmit}> <label> 选择你喜欢的风味: <select value={this.state.value} onChange={this.handleChange}> <option value="grapefruit">葡萄柚</option> <option value="lime">酸橙</option> <option value="coconut">椰子</option> <option value="mango">芒果</option> </select> </label> <input type="submit" value="提交" /> </form> ); } </code></pre> <ol start="4"> <li>当需要处理多个 input 元素时，我们可以给每个元素添加 name 属性，并让处理函数根据 event.target.name 的值选择要执行的操作。</li> </ol> <pre><code>class Test extends React.Component { constructor(props) { super(props) this.state = { v: 1, v1: 2, v2: 3, v3: 4 }; } handleChange(e) { console.log(e.target.name) this.setState({ [e.target.name]: e.target.value }) } render() { return ( <div> <form> <input name="v" value={this.state.v} onChange={this.handleChange.bind(this)}/> <input name="v1" value={this.state.v1} onChange={this.handleChange.bind(this)}/> <input name="v2" value={this.state.v2} onChange={this.handleChange.bind(this)}/> <input name="v3" value={this.state.v3} onChange={this.handleChange.bind(this)}/> </form> <p>{this.state.v}</p> <p>{this.state.v1}</p> <p>{this.state.v2}</p> <p>{this.state.v3}</p> </div> ); } } </code></pre> <ol start="5"> <li>在受控组件上指定 value 的 prop 会阻止用户更改输入。如果你指定了 value，但输入仍可编辑，则可能是你意外地将value 设置为 undefined 或 null。</li> </ol> <p>下面的代码演示了这一点。（输入最初被锁定，但在短时间延迟后变为可编辑。）</p> <pre><code>ReactDOM.render(<input value="hi" />, mountNode); setTimeout(function() { ReactDOM.render(<input value={null} />, mountNode); }, 1000); </code></pre>