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挂钩。

useState返回的数组如下：['currentValue', 'methodToSetValue']

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

如果您需要先前的值（例如，不是要清除而是要对其进行更新），则可以将一个函数传递给setName：

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

这会将Surname附加到当前名称之后。

希望这会有所帮助。编码愉快。

Answer 2

只需使用setName('')重设名称。另外，如果由于某种原因需要访问当前状态，请使用setState的功能形式：

setName(name => {
  // Do smth with the name
  return name; // Return updated state
);

用useState清除字段

2 个答案: