如何在 ReactJS 中使用动态键名设置状态？

在 ReactJS 中，我们经常需要更新组件的状态。有时候，我们可能需要使用动态的键名来设置状态。本文将介绍如何在 ReactJS 中使用动态键名设置状态。

使用对象扩展运算符

我们可以使用对象扩展运算符（spread operator）来设置动态键名的状态。具体来说，我们需要先将当前状态拷贝一份，然后再使用扩展运算符将新的状态合并进去。下面是一个简单的示例：

import React, { useState } from 'react';

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

  function handleInputChange(event) {
    const name = event.target.name;
    const value = event.target.value;

    setState({
      ...state,
      [name]: value
    });
  }

  return (
    <form>
      <label>
        Name:
        <input type="text" name="name" onChange={handleInputChange} />
      </label>
      <label>
        Age:
        <input type="number" name="age" onChange={handleInputChange} />
      </label>
      <label>
        Email:
        <input type="email" name="email" onChange={handleInputChange} />
      </label>
    </form>
  );
}

export default App;

在上面的代码中，我们使用了 useState Hook 来定义了一个空的状态，然后通过表单中的输入框来更新状态。注意到我们在 setState 方法中使用了对象扩展运算符，将输入框的名称作为键名，将输入框中的值作为键值合并到了当前的状态中。

使用函数式更新

除了对象扩展运算符以外，我们还可以使用函数式更新来设置动态键名的状态。函数式更新是一个回调函数，它的第一个参数是当前状态。我们可以在回调函数中使用当前状态来计算新的状态。下面是一个示例：

import React, { useState } from 'react';

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

  function handleInputChange(event) {
    const name = event.target.name;
    const value = event.target.value;

    setState(prevState => ({
      ...prevState,
      [name]: value
    }));
  }

  return (
    <form>
      <label>
        Name:
        <input type="text" name="name" onChange={handleInputChange} />
      </label>
      <label>
        Age:
        <input type="number" name="age" onChange={handleInputChange} />
      </label>
      <label>
        Email:
        <input type="email" name="email" onChange={handleInputChange} />
      </label>
    </form>
  );
}

export default App;

在上面的代码中，我们通过将回调函数作为 setState 的参数来使用函数式更新。回调函数的第一个参数是当前状态，我们在回调函数中将输入框的名称作为键名，将输入框中的值作为键值合并到了当前的状态中。

结论

在 ReactJS 中，我们可以使用对象扩展运算符或者函数式更新来设置动态键名的状态。这样可以让我们更加灵活地更新组件的状态，提高了代码的可读性和可维护性。