React Material - ui 文本字段验证：设置自定义错误消息

Question

我有一个材质 UI 文本字段，在输入某个值后，我想在自定义验证失败时设置一条错误消息。

仅当输入空白值时，我才能在错误消息中进行设置。因此，我想添加我自己的客户错误消息，而不是空白值错误消息。

const checkValue = (newValue) => {
    var other = { 'a': 1 };
    if(!_.isEqual(newValue, other)) {
        alert('value is correct.');
        //I want to set error message next to field value is not correct.
    }
}

<TextField
    id="form-value"
    className={classes.textField}
    margin="dense"
    label={'value'}
    value={value}
    onKeyUp={e => { checkValue(e.target.value); }}
    onChange={e => { checkValue(e.target.value); }}
    variant="outlined"
    error={value=== ""}
    helperText={value=== "" ? 'Please enter a value!' : ' '}
    fullWidth
>

Answer 1

使用helperTextprop 来设置错误消息：

export default function TextFields() {
  const [values, setValues] = React.useState({
    name: ""
  });

  const handleChange = name => event => {
    setValues({ ...values, [name]: event.target.value });
  };

  const error = values.name !== "a";

  return (
    <form>
      <TextField
        id="standard-name"
        label="Name"
        value={values.name}
        onChange={handleChange("name")}
        margin="normal"
        helperText={error ? "Name needs to be 'a'" : "Perfect!"}
        error={error}
      />
    </form>
  );
}

这是代码沙箱中的示例