React事件处理 & 收集表单数据 & 高阶函数_函数柯里化

事件处理

1. 通过onXxx属性指定事件处理函数（注意大小写：onClick）

• a.React使用的是自定义（合成）事件，而不是使用的原生DOM事件 —— 为了更好的兼容性
• b. React中的事件是通过事件委托方式处理的（委托给组件最外层的元素）—— 为了高效

2. 通过event.target得到发生事件的DOM元素对象 —— 不要过度使用ref

收集表单数据

受控组件

表单中所有输入类的组件，现用现取，就是非受控组件。

<script type="text/babel">
      //创建组件
      class Login extends React.Component {
        state = {
          username: "",
          password: "",
        };
        //保存用户名到状态中
        saveUsername = (event) => {
          this.setState({ username: event.target.value });
        };
        //保存密码到状态中
        savePassword = (event) => {
          this.setState({ password: event.target.value });
        };
        handleSubmit = (event) => {
          event.preventDefault();
          alert(`${this.state.username}${this.state.password}`);
        };
        render() {
          return (
            <form action="http://www.atguigu.com" onSubmit={this.handleSubmit}>
              用户名：
              <input type="text" name="name" onChange={this.saveUsername} />
              密码：
              <input type="password" name="pwd" onChange={this.savePassword} />
              <button>登录</button>
            </form>
          );
        }
      }
      ReactDOM.render(<Login />, document.getElementById("test"));
    </script>

受控组件

页面中所有输入类的DOM，随着输入，就能将值维护到状态中，就是受控组件。

<script type="text/babel">
      //创建组件
      class Login extends React.Component {
        handleSubmit = (event) => {
          event.preventDefault();
          const { username, password } = this;
          alert(username.value);
          alert(password.value);
        };
        render() {
          return (
            <form action="http://www.atguigu.com" onSubmit={this.handleSubmit}>
              用户名：
              <input
                type="text"
                name="name"
                ref={(c) => {
                  this.username = c;
                }}
              />
              密码：
              <input
                type="password"
                name="pwd"
                ref={(c) => {
                  this.password = c;
                }}
              />
              <button>登录</button>
            </form>
          );
        }
      }
      ReactDOM.render(<Login />, document.getElementById("test"));
    </script>

【更建议使用受控组件，因为可以不使用ref】

高阶函数 & 函数柯里化

获取当前节点

将saveFormData的返回值返回给onChange属性，所以数据一旦发生改变，React就会调用返回回来的函数，并将event事件传递进去，这样我们就可以通过event.target()获取当前节点.

• 我们需要把一个函数交给onChange属性。
• saveFormData就是高阶函数

<script type="text/babel">
      //创建组件
      class Login extends React.Component {
        //初始化状态
        state = {
          username: "",
          password: "",
        };
        //保存表单数据到状态中
        saveFormData = (dataType) => {
          return (event) => {
            console.log(this);
            this.setState({ [dataType]: event.target.value });
          };
        };
        handleSubmit = (event) => {
          event.preventDefault();
        };
        render() {
          return (
            <form action="http://www.atguigu.com" onSubmit={this.handleSubmit}>
              用户名：
              <input
                type="text"
                name="name"
                onChange={this.saveFormData("username")}
              />
              密码：
              <input
                type="password"
                name="pwd"
                onChange={this.saveFormData("password")}
              />
              <button>登录</button>
            </form>
          );
        }
      }
      ReactDOM.render(<Login />, document.getElementById("test"));
    </script>

高阶函数

高阶函数：如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数

1. 若A函数，接收的参数是一个函数，那么A就可以称之为高阶函数。
2. 若A函数，调用的返回值依然是一个函数，那么A就可以称之为高阶函数
   常见的高阶函数有：Promise、setTimeout、arr.map()

<script type="text/babel">
      /*
        
        高阶函数：如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数
            1. 若A函数，接收的参数是一个函数，那么A就可以称之为高阶函数。
            2. 若A函数，调用的返回值依然是一个函数，那么A就可以称之为高阶函数
            常见的高阶函数有：Promise、setTimeout、arr.map()

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

      //创建组件
      class Login extends React.Component {
        //初始化状态
        state = {
          username: "",
          password: "",
        };
        //保存表单数据到状态中
        saveFormData = (dataType) => {
          return (event) => {
            console.log(this);
            this.setState({ [dataType]: event.target.value });
          };
        };
        handleSubmit = (event) => {
          event.preventDefault();
        };
        render() {
          return (
            <form action="http://www.atguigu.com" onSubmit={this.handleSubmit}>
              用户名：
              <input
                type="text"
                name="name"
                onChange={this.saveFormData("username")}
              />
              密码：
              <input
                type="password"
                name="pwd"
                onChange={this.saveFormData("password")}
              />
              <button>登录</button>
            </form>
          );
        }
      }
      ReactDOM.render(<Login />, document.getElementById("test"));
    </script>

函数的柯里化

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

<script>
function sum (a) {
	return (b) => {
		return (c) => {
			return a + b + c;
		}
	}
}
console.log(1)(2)(3)
</script>

• 刚才例子中saveFormData()就使用了函数柯里化技术
• 当然也可以不用柯里化，问题只在于将获取到当前发生事件的节点，我们通过箭头函数被动调用的方式，获得当前发生的事件，将发生的事件传递给真正要调用的函数，箭头函数内部再给真正要调用的函数传递另一个参数。
• 这样就实现了，获取当前发生事件的节点（有了事件，就能通过event.target()获取发生事件的节点），并且正常执行。

<script type="text/babel">
      //创建组件
      class Login extends React.Component {
        //初始化状态
        state = {
          username: "",
          password: "",
        };
        //保存表单数据到状态中
        saveFormData = (dataType, event) => {
          this.setState({ [dataType]: event.target.value });
        };
        handleSubmit = (event) => {
          event.preventDefault();
          alert(
            `您输入的用户名是${this.state.username}，密码是${this.state.password}`
          );
        };
        render() {
          return (
            <form action="http://www.atguigu.com" onSubmit={this.handleSubmit}>
              用户名：
              <input
                type="text"
                name="name"
                onChange={(event) => {
                  this.saveFormData("username", event);
                }}
              />
              密码：
              <input
                type="password"
                name="pwd"
                onChange={(event) => {
                  this.saveFormData("password", event);
                }}
              />
              <button>登录</button>
            </form>
          );
        }
      }
      ReactDOM.render(<Login />, document.getElementById("test"));
    </script>