使用表单

我们知道，表单控件如输入框、复选框等，它们内部都会保持着自己的数据容器，但是React组件数据的核心是State，页面上表单数据的改变需要触发React组件State数据的改变，才能使得应用的数据保持一致。这篇笔记我们主要学习React中，有关表单数据和事件处理的内容。

实现数据绑定

React组件的state和表单控件数据交互有两个方向：将State值设置给表单控件，以及将表单控件上用户输入的值设置给React组件的State。如果这两个方向均实现，那么它们就是双向绑定的。

import { useState } from "react";

const App = () => {
  const [text, setText] = useState("");

  return (
    <div>
      <input
        type="text"
        onChange={(event) => {
          setText(event.target.value);
        }}
        value={text}
      />
      {text}
    </div>
  );
};

export default App;

上面代码中，读取<input>的值可以通过onChange回调实现，回调函数中通过event.target.value读取具体的值；设置<input>的值通过设置<input>的value属性实现。上面代码运行后，修改输入框后面显示的内容会同步改变。

针对textarea的改进

我们知道HTML中<textarea>使用文本节点值表示这个控件容纳的数据，这和<input>控件不同。React中对此做出了改进，我们可以像使用<input>一样使用<textarea>。

import { useState } from "react";

const App = () => {
  const [text, setText] = useState("");

  return (
    <div>
      <textarea
        type="text"
        onChange={(event) => {
          setText(event.target.value);
        }}
        value={text}
      />
      {text}
    </div>
  );
};

export default App;

针对select的改进

原始的<select>控件中，使用<option>的selected属性表示一个选项被选中了，React中并不使用selected属性，而是在根select标签中使用value属性表示选中项，这种改进便于JSX的编写。

import { useState } from "react";

const App = () => {
  const [text, setText] = useState("A");

  return (
    <div>
      <select
        onChange={(event) => {
          setText(event.target.value);
        }}
        value={text}
      >
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
      </select>
      {text}
    </div>
  );
};

export default App;

针对多个控件进行数据绑定

如果一个表单有多个控件（通常都是这样的），读取表单时我们显然不应该定义一大堆handleXXXChange()函数，而是使用统一的回调函数处理所有组件的onChange事件，这需要我们在回调函数中判断做出修改的究竟是哪一个控件，并作出相应的处理。下面是解决该问题的一种比较好的实现方式。

import { useState } from "react";

const App = () => {
  const [user, setUser] = useState({
    username: "",
    password: "",
    repassword: "",
  });

  const onChange = (event) => {
    switch (event.target.name) {
      case "username":
        setUser({ ...user, username: event.target.value });
        break;
      case "password":
        setUser({ ...user, password: event.target.value });
        break;
      case "repassword":
        setUser({ ...user, repassword: event.target.value });
        break;
    }
  };

  return (
    <div>
      <input type="text" name="username" onChange={onChange} />
      <input type="password" name="password" onChange={onChange} />
      <input type="password" name="repassword" onChange={onChange} />
      {JSON.stringify(user)}
    </div>
  );
};

export default App;

代码中，我们通过event.target.name获取HTML控件的name属性，据此找到触发回调函数的是哪个控件，然后对应设置React组件的State。

使用UI库的表单控件

实际开发中我们可能很少直接用HTML原生的表单控件，一般都是直接使用UI库的，对应的方法需要查看相应的文档，UI库实际上就是封装好的一些React组件，能够直接供我们调用。

作者：Gacfox