React js验证文本字段

Question

我正在尝试在 reactjs 中进行验证。 例如，我有一个名为“名称”的字段，每次输入名称时，它必须大于或等于 2。当名称小于 2 时有效，但如果大于 2，消息仍然出现。 这是我的代码：

const [data, setData] = React.useState({
nameValid: true,
prenumeValid: true,
check_textInputChange: false,
name: "",
});

const handleValidUser = (val) => {
if (val.length >= 2) {
  setData({
    ...data,
    nameValid: true,
  });
} else {
  setData({
    ...data,
    nameValid: false,
    });
    }
  };
  const textInputChange = (val) => {
  if (val.length >= 2) {
    setData({
    ...data,
    name: val,
    nameValid: true,
    check_textInputChange: true,
  });
} else {
  setData({
    ...data,
    name: val,
    nameValid: false,
    check_textInputChange: false,
  });
}
 };


 <TextField
      type="text"
      variant="outlined"
      label="Nume"
      required
      fullWidth
      autofocus
      validate
      style={{ marginBottom: "1em" }}
      onChange={(val) => textInputChange(val)}
      onBlur={(e) => handleValidUser(e)}
    />
    {data.nameValid ? null : (
      <text>The name has to be at least 2 letters long</text>
    )}

Answer 1

你能尝试改变吗

onChange={(val) => textInputChange(val)}

对此：

onChange={(e) => textInputChange(e.target.value)}

Answer 2

在 function textInputChange您传递事件 object 而不是输入值，您必须更改onchange处理程序：

onChange={(val) => textInputChange(val)}

至

onChange={(val) => textInputChange(val.target.value)}

Answer 3

onChange有一个事件参数，如果你想获取TextField的值，你应该写如下。

const textInputChange = e => {
    const val = e.target.value;
    
    if (val.length > 2) {
        setData(...)
    } else {
        setData(...)
    }
}

return (
    <TextField
        ...
        onChange={textInputChange}
        onBlur={handleValidUser} // as well as onBlur
    />
)

我创建了一个代码框来 在这里演示。

每次调用 function 时，如下调用 function 将创建一个额外的渲染。 你应该避免它。

onChange={(val) => textInputChange(val)}