反应材料-ui文本字段验证：设置自定义错误消息

Question

我有一个Material-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

使用helperText道具来设置错误消息：

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>
  );
}

这是代码沙箱中的一个示例

Answer 2

通常在helperText中调用一个函数：

 helperfn() {    

               if (this.state.data.name.trim().length==0) return 'Can not be empty';
               if (this.state.data.name.replace(/[a-zA-Z0-9_ ]/g, '').length>0) return 'Only letters and numbers';
             }