高阶函数和函数柯里化处理React中受控组件state传值 - ellaha

一，高阶函数

<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>

posted on 2022-01-17 14:27 ellaha 阅读(74) 评论(0) 收藏举报

刷新页面返回顶部