如何根据 React Material Ui 中其他文本字段的输入来验证文本字段？答案

【问题标题】：How to validate textfield based on input of other textfield in React Material Ui?如何根据 React Material Ui 中其他文本字段的输入来验证文本字段？
【发布时间】：2020-11-27 06:52:10
【问题描述】：

我正在使用材质 ui 文本字段。我遇到了我想编写一个文本字段依赖于另一个文本字段的代码的问题。就像如果在文本字段一中我输入没有 4，那么文本字段二中的数字应该始终大于 4。这意味着文本字段二取决于文本字段一。请参阅代码沙箱中的代码。 https://codesandbox.io/s/textfield-with-outline-color-forked-8oj2z

       <TextField
          id="outlined-email-input"
          label="Email"
          className={classes.textField}
          type="number"
          defaultValue="0"
          name="email"
          autoComplete="email"
          margin="normal"
          variant="outlined"
        />

【问题讨论】：

标签： javascript reactjs ecmascript-6 material-ui frontend

【解决方案1】：

您可以声明用于存储 text1 和 text2 的值的状态，并比较它们以进行验证。

以下是示例以及代码框链接。

输出：



class OutlinedTextFields extends React.Component {
  state = {
    txt1: 0,
    txt2: 0
  };


  render() {
    const { classes } = this.props;

    return (
      <form className={classes.container} noValidate autoComplete="off">
        <TextField
          id="outlined-email-input"
          label="Text1"
          className={classes.textField}
          type="number"
          defaultValue={this.state.txt1}
          onChange={(event) => {
            this.setState({
              txt1: parseInt(event.target.value)
            });
          }}
          margin="normal"
          variant="outlined"
        />
        <TextField
          id="outlined-password-input"
          label={
            this.state.txt1 >= this.state.txt2
              ? "Text2 should be greater than Text1"
              : "Text2"
          }
          className={classes.textField}
          type="number"
          error={this.state.txt1 >= this.state.txt2}
          defaultValue={this.state.txt2}
          onChange={(event) => {
            this.setState({
              txt2: parseInt(event.target.value)
            });
          }}
          name="password"
          margin="normal"
          variant="outlined"
        />
        <Button
          margin="normal"
          variant="outlined"
          disabled={
            this.state.txt1 >= this.state.txt2 ||
            !this.state.txt1 ||
            !this.state.txt2
          }
        >
          Submit
        </Button>
      </form>
    );
  }
}

Codesandbox Link

【讨论】：

【解决方案2】：

解决此问题的一种可能方法：顺便说一句：这只是一个有想法的草稿，你可以尽可能地改进它。

const OutlinedTextFields = () => {
  const [inpValue, setInputValue] = useState();
  const handleInputVal = (val) => {
    if (!val) {
      return 0;
    }
    if (Number(val) !== 4) {
      return Number(val) + 1;
    } else {
      return val;
    }
  };
  return (
    <form noValidate autoComplete="off">
      <TextField
        id="outlined-email-input"
        label="Email"
        type="number"
        defaultValue="0"
        name="email"
        autoComplete="email"
        margin="normal"
        variant="outlined"
        onChange={(e) => setInputValue(e.target.value)}
      />
      <TextField
        id="outlined-password-input"
        label="Password"
        type="number"
        defaultValue="0"
        name="password"
        autoComplete="current-password"
        margin="normal"
        variant="outlined"
        value={handleInputVal(inpValue)}
      />
    </form>
  );
};

【讨论】：

【解决方案3】：

Material UI 文本字段有一个可以使用的错误道具。然后将您所在州的错误声明为错误。在你的 onChange 函数中添加一个条件。

const OutlinedTextFields = () => {
  const [inputValue, setInputValue] = useState('');
  const [error, setError] = useState(false)
  const handleInput = (val) => {
    if (!val) {
      return 0;
    }
    if (val <= inputValue) {
      return setError(true);
    } else {
      setError(false);
      return val;
    }
  };
  return (
    <form noValidate autoComplete="off">
      <TextField
        ...
        onChange={(e) => setInputValue(e.target.value)}
      />
      <TextField
        ...
        error={error}
        helperText={error && `Number must be greater than ${inputValue}`}
        onChange={(e) => handleInput(e.target.value)}
      />
    </form>
  );
};

【讨论】：