华人在线亚洲欧美精品,四虎永久精品免费视频,五月丁香啪啪

一，高階函數(shù)

<body>
  <div id="example"></div>
  <script type="text/babel">
    class Demo extends React.Component{
      state = {
          userName: '',
          password: ''
        }

      render(){

        return (
          <form onSubmit={this.handleLogin}>
            // 將函數(shù)handleInfo的返回值作為onChange的回調(diào)
            姓名<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)
      }
　　　　// 高階函數(shù)
      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>

二，函數(shù)柯里化

https://juejin.cn/post/6844903959757324296

三，不用高階函數(shù)實(shí)現(xiàn)受控組件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 閱讀(75) 評(píng)論(0) 收藏舉報(bào)

刷新頁(yè)面返回頂部