reactjs - 如何在功能组件中使用 onChange 事件处理程序动态设置状态

Question

回到使用基于类的组件的时代，我们能够使用 name 属性动态设置输入元素的状态，如下所述。我想知道是否有任何方法可以使用 useState 钩子(Hook)动态设置输入状态

onChange = (event) => {
  const { target: { name, value } } = event
  this.setState({ [name]: value })
}

Answer 1

您可以使用 useState 来完成相同的操作

function App() {
  const [state, setState] = React.useState({});

  const onChange = event => {
    const {
      target: { name, value }
    } = event;
    setState({ [name]: value });
  };

  ... your input...
}

但请注意 useState的更新程序(在本例中为 setState)不会将现有 Prop 合并为 this.setState做。

class App extends Component {
  state = {age: 10};
  onChange = e => {
    ... get name and value..

    // Here, `age` is not overwritten and stays as `10` after this.setState
    this.setState({[name]: value})
  }
}

function App() {
  const [state, setState] = React.useState({age: 10});

  const onChange = event => {
    ... get name & value

    // If you do this, `age` becomes undefined.
    setState({ [name]: value });

    // you have to spread the existing state first
    setState({...state, [name]: value });
  };
}

根据您的评论，如果您有多个动态数量的输入，则使用 {[name]: value} 是有意义的。但是，如果您有一定数量的输入，则可以声明一个 useState每个州。

function App() {
  const [password, setPassword] = useState("");
  const [name, setName] = useState("");

  const updatePassword = e => setPassword(e.target.value);
  const updateName = e => setName(e.target.value);

  return (
    <form>
      <input type="text" value={password} onClick={updatePassword} />
      <input type="text" value={name} onClick={updateName} />
    </form>
  );
}