React从入门到精通系列之(9)表单处理
九、表单处理HTML表单元素与React中的其他DOM元素有点不同,因为表单元素自然地保留一些内部状态。 例如,这种采用纯HTML格式的表单接受单个name: <form> <label> Name: <input type="text" name="name" /> </label> <input type="submit" value="Submit" /> </form> 此表单具有在用户提交表单时浏览到新页面的默认HTML表单行为。 可控组件在HTML中,诸如 我们可以通过使React state是 例如,如果我们想让前面的示例日志在提交时记录下名称,我们可以将表单作为 import React from 'react'; import ReactDOM from 'react-dom'; class NameForm extends React.Component { constructor(props) { super(props); this.state = {value: ''}; this.change = this.change.bind(this); this.submit = this.submit.bind(this); } change(e) { this.setState({value: e.target.value}); } submit(e) { e.preventDefault(); console.log('A name was submitted: ',this.state.value); } render() { return ( <form onSubmit={this.submit} > <label> Name: <input type="text" value={this.state.value} onChange={this.change} /> </label> <input type="submit" value="Submit" /> </form> ) }; } ReactDOM.render( <NameForm/>,document.getElementById('root') ); 因为 使用 change(e) { this.setState({value: e.target.value.toUpperCase()}); } textarea标签在HTML中, <textarea> Hello there,my name is zhangyatao! </textarea> 在React中, class EssayForm extends React.Component { constructor(props) { super(props); this.state = {value: '请填写一个你喜欢的dom元素'}; this.change = this.change.bind(this); this.submit = this.submit.bind(this); } change(e) { this.setState({value: e.target.value}); } submit(e) { e.preventDefault(); console.log('有东西被提交了:',this.state.value); } render() { return ( <form onSubmit={this.submit}> <label> Name: <textarea value={this.state.value} onChange={this.change} /> </label> <input type="submit" value="Submit" /> </form> ); } } 请注意, select标签在HTML中, <select> <option value="fruit">fruit</option> <option value="lime">lime</option> <option selected value="coconut">coconut</option> <option value="mango">mango</option> </select> 请注意,由于 import React from 'react'; import ReactDOM from 'react-dom'; class FlavorForm extends React.Component { constructor(props) { super(props); this.state = {value: 'coconut'}; this.change = this.change.bind(this); this.submit = this.submit.bind(this); } change(e) { this.setState({value: e.target.value}); } submit(e) { e.preventDefault(); console.log('你喜欢的是:',this.state.value); } render() { return ( <form onSubmit={this.submit}> <label> 请选择一个你喜欢的水果 <select value={this.state.value} onChange={this.change}> <option value="fruit">fruit</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') ); 总的来说,这使得 可控组件的备选方案使用受控组件有时可能很乏味,因为您每次都需要为数据更改去编写事件处理程序,并通过React组件管理所有输入状态。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |