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

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

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

---

您可以使用useState来完成同样的任务

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

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

  ... your input...
}

但是请注意，

useState

的更新程序（

setState

在本例中）不会像

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>
  );
}

函数应用程序（）{
const[password，setPassword]=useState（“”）；
const[name，setName]=useState（“”）；
const updatePassword=e=>setPassword（e.target.value）；
const updateName=e=>setName（e.target.value）；
返回(
);
}

如果我有多个输入元素的状态怎么办？在基于类的组件中，我将编写state={textInput，password…etc}，并且我仍然可以根据我在这些输入元素上设置的name属性设置所有组件的状态。我不知道如何使用上面的代码来实现这一点。你能解释一下吗？我已经更新了答案，以说明如何不丢失其他道具，如

textInput

、密码等。每个州都可以有一个

useState

，但如果变得复杂，您可以使用

useReducer

oh，因此我必须为所有这些组件设置一个状态，并且它的值应该是一个包含其名称的对象，就像类中的组件一样？如果您的状态是动态的（例如表单值），那么使用

[name]是有意义的：value

route。但是如果您有一组输入，您可以有多个

useState

s。让我更新答案。不客气。我在答案中再次添加了补充注释：）