下面表单中的所有属性的保存都通过一个saveFormData 即可实现
saveFormData接收一个参数,并返回了一个函数,这个返回的函数作为onChange事件的回调函数
回调函数参数又是事件发生的元素节点
这样就能同时获取到需要保存的属性名,通过事件发生的元素节点获取对应的value
达到保存表单数据的效果
class Login extends React.Component{ //初始化状态 state = { username:'', //用户名 password:'' //密码 } //保存表单数据到状态中 saveFormData = (dataType)=>{ return (event)=>{ this.setState({[dataType]:event.target.value}) } } //表单提交的回调 handleSubmit = (event)=>{ event.preventDefault() //阻止表单提交 const {username,password} = this.state alert(`你输入的用户名是:${username},你输入的密码是:${password}`) } render(){ return( <form onSubmit={this.handleSubmit}> 用户名:<input onChange={this.saveFormData('username')} type="text" name="username"/> 密码:<input onChange={this.saveFormData('password')} type="password" name="password"/> <button>登录</button> </form> ) } } //渲染组件 ReactDOM.render(<Login/>,document.getElementById('test'))