React js验证文本字段答案

【问题标题】：React js Validation textfieldReact js验证文本字段
【发布时间】：2021-03-24 06:38:07
【问题描述】：

我正在尝试在 reactjs 中进行验证。例如，我有一个名为“name”的字段，每次输入名称时，它必须大于或等于 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>
    )}

【问题讨论】：

下次，我建议您在发布问题之前先修正缩进。

标签： javascript reactjs material-ui frontend

【解决方案1】：

onChange有一个event参数，如果你想获取TextField的值，你应该这样写。 p>

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
    />
)

我创建了一个代码框来演示here。

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

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

【讨论】：

【解决方案2】：

你可以尝试改变吗

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

到这里：

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

【讨论】：

【解决方案3】：

在函数 textInputChange 中，您传递的是事件对象而不是输入值您必须从以下位置更改 onchange 处理程序：

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

到

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

【讨论】：