react 高阶函数-函数的柯里化实现-CSDN博客

本文链接：https://blog.csdn.net/jieweiwujie/article/details/143200836

函数的柯里化：通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>15-1高阶函数-函数的柯里化</title>
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <!-- Don't use this in production: -->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <!-- 对组件标签进行限制 -->
  <script src="https://unpkg.com/prop-types@15.7.2/prop-types.js"></script>
</head>

<body>
  <div id="test">
    <div id="test1"></div>
  </div>
  <script type="text/babel">
    class Demo extends React.Component {
      //及时维护数据到状态里面去
      state = {
        username: "",
        password: "",
      }
      onsubmit = (e) => {
        e.preventDefault()//阻止表单提交
        console.log(this.myref1)
        alert(this.state.username + '=' + this.state.password)
      }
      //函数的柯里化-高阶函数
      onchange = (data) => {
        console.log('data',data)
        return (event) => {
          this.setState({
            [data]: event.target.value
          })
          console.log(this.state)
        }
        
      }
      render() {
        return (<div>
          <form action='http://baidu.com' onSubmit={this.onsubmit}>
            <input placeholder='用户名' type='text' name='username' onChange={this.onchange('username')}  ></input>
            <input placeholder='密码框' type='password' name='password' onChange={this.onchange('password')}  ></input>
            <button >点击提示左侧数据</button>
          </form>
        </div>)
      }
    }
    ReactDOM.render(<Demo />, document.getElementById("test1"));
//#region
    /**
     * 一 高级函数，满足下面1个就算
     * 1 函数A接受的参数是一个函数
     * 2 函数A返回值依然是一个函数
     * 3 常见高阶函数：promise setTimeout，arr.map()
     * 二 函数的柯里化
     * 通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式
    */
   //#endregion
  </script>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>不用高阶函数-函数的柯里化实现</title>
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <!-- Don't use this in production: -->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <!-- 对组件标签进行限制 -->
  <script src="https://unpkg.com/prop-types@15.7.2/prop-types.js"></script>
</head>

<body>
  <div id="test">
    <div id="test1"></div>
  </div>
  <script type="text/babel">
    class Demo extends React.Component {
      //及时维护数据到状态里面去
      state = {
        username: "",
        password: "",
      }
      onsubmit = (e) => {
        e.preventDefault()//阻止表单提交
        console.log(this.myref1)
        alert(this.state.username + '=' + this.state.password)
      }
      //函数的柯里化-高阶函数
      onchange = (data,value) => {
        console.log('data',data)
        this.setState({
            [data]: value
          })
          console.log(this.state)
      }
      render() {
        return (<div>
          <form action='http://baidu.com' onSubmit={this.onsubmit}>
            <input placeholder='用户名' type='text' name='username' onChange={(event)=>{
              this.onchange('username',event.target.value)
            }}  ></input>
            <input placeholder='密码框' type='password' name='password'  onChange={(event)=>{
              this.onchange('password',event.target.value)}} ></input>
            <button >点击提示左侧数据</button>
          </form>
        </div>)
      }
    }
    ReactDOM.render(<Demo />, document.getElementById("test1"));
  </script>
</body>

</html>