一,高阶函数
<body> <div id="example"></div> <script type="text/babel"> class Demo extends React.Component{ state = { userName: '', password: '' } render(){ return ( <form onSubmit={this.handleLogin}> // 将函数handleInfo的返回值作为onChange的回调 姓名<input type="text" onChange={this.handleInfo('userName')} /> 密码<input type="password" onChange={this.handleInfo('password')} /> <button>提交</button> </form> ) } handleLogin = (event)=>{ event.preventDefault() const {userName, password} = this.state console.log(userName, password) }
// 高阶函数 handleInfo = (type)=>{ return (event)=>{ console.log(this) console.log(event.target) this.setState({[type]: event.target.value}) } } } ReactDOM.render(<Demo />, document.getElementById('example')) </script> </body>
二,函数柯里化
https://juejin.cn/post/6844903959757324296
三,不用高阶函数实现受控组件state传值
<body> <div id="example"></div> <script type="text/babel"> class Demo extends React.Component{ state = { userName: '', password: '' } render(){ return ( <form onSubmit={this.handleLogin}> 姓名<input type="text" onChange={event => this.handleInfo(event, 'userName')} /> 密码<input type="password" onChange={event => this.handleInfo(event, 'password')} /> <button>提交</button> </form> ) } handleLogin = (event)=>{ event.preventDefault() const {userName, password} = this.state console.log(userName, password) } handleInfo = (event, type)=> { this.setState({[type]: event.target.value}) } } ReactDOM.render(<Demo />, document.getElementById('example')) </script> </body>