Question

因此，我正在更新我的一个旧项目，以尽可能使用钩子而不是始终保持状态。我基本上是在重构该项目，并根据此后的经验对其进行改进。

我碰到了这个

handleChange(event){
   setState({ [event.target.name]: event.target.value })
}

我已经为组件中的其他值创建了一个useState挂钩，但是我不知道如何为计算属性设置状态。

Password: <input className= "userNameBox" type="password" name="password" value={this.state.password} onChange={this.handleChange} onKeyPress={this.enterPressed.bind(this)}></input>

在相关情况下，我在上面调用该方法。

谁能告诉我为了使用钩子而需要对此方法进行哪些更改？

Answer 1

对于带有钩子的用户，您需要将functional updates与prevState一起使用，因为它不会与先前的状态（例如与this.setState等价）合并。

请参见State Updates Are Merged。

const Component = () => {
  const [value, setValue] = useState({ password: "" });
  const onChange = ({ target: { name, value } }) => {
    setValue((prevState) => ({ ...prevState, [name]: value }));
  };
  return <input name="password" value={value.password} onChange={onChange} />;
};

Answer 2

首先，您需要按以下步骤从React导入useState方法。

import React, { useState } from "react";

然后，使用useState方法作为初始值。

const [state, setState] = useState(null);

最后，只需更新handleChange方法。

handleChange(event){
    setState(event.target.value);
}

请检查this link以获得详细信息。您也可以使用useEffect方法。比较适合需要多个状态的情况

如何使用钩子设置计算属性的状态

2 个答案: