javascript - 使用 useState 清除字段

Question

我有一个表单，提交后需要清除输入字段。

我正在使用 useState 并在我的 addNewColor 方法中，我正在重置 newName 状态以返回到空字符串。初始状态是一个空字符串，所以我想我只需调用 setName(newName) 因为这是我的初始状态，但它不起作用。我知道有某种方法可以使用 prevState，但我还没有完全理解它。对于令人困惑的总结，我深表歉意。

简而言之，我只是想清理这个领域。我正在使用 Material UI，名称位于 TextValidator 组件内。

const NewPaletteForm = () => {
  const [currentColor, setColor] = useState("teal");
  const [colors, setColors] = useState([]);
  const [newName, setName] = useState("");

  function addNewColor() {
    const newColor = {
      color: currentColor,
      name: newName
    };

    const resetName = {
      name: ""
    };

    setName(newName, resetName);
    setColors([...colors, newColor]);
  }

  function handleChange(event) {
    setName(event.target.value);
  }
};

<ValidatorForm onSubmit={addNewColor}>
  <TextValidator
    value={newName}
    onChange={handleChange}
    validators={["required", "isColorNameUnique", "isColorUnique"]}
    errorMessages={[
      "Enter a color name",
      "Color name must be unique",
      "Color is already used"
    ]}
  />
  <Button
    variant="contained"
    type="submit"
    color="primary"
    style={{ backgroundColor: currentColor }}
  >
    Add Color
  </Button>
</ValidatorForm>;

Answer 1

我认为您误解了 useState Hook 。

从 useState 返回的数组如下所示:['currentValue', 'methodToSetValue']

因此，要重置名称，您只需调用 setName("")，这会将当前值设置为“”。

如果您需要以前的值(例如不是清除而是更新)，您可以将一个函数传递到 setName 中:

setName(prevName => prevName+' Surname');

这会将Surname 附加到当前姓名。