Блог

Я пытаюсь выполнить проверку в 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>
    )}
 

onChange имеет параметр события, если вы хотите получить значение текстового поля, вы должны записать его, как показано ниже.

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

Я создал codesandbox для демонстрации здесь.

Вызов функции, как показано ниже, будет создавать дополнительный рендеринг при каждом вызове функции. Вам следует избегать этого.

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

Можете ли вы попробовать изменить

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

для этого:

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

в функции textInputChange вы передаете объект события вместо входного значения, которое вы должны изменить на обработчик onchange с:

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

Для

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