javascript - React MaterialUI - 单击按钮后在 TextField 组件上设置错误

Question

我有一个输入表单，我想在单击“搜索”按钮后验证输入字段。

我看到的大多数答案都是实时验证输入，因为用户将其输入到表单中。
我不想这样做，因为我需要做的一些验证是一项昂贵的操作(例如验证 API key )，因此在输入时不断检查它不是一种选择。
这也是一个无服务器的单页面应用程序，据我所知 - onSubmit 会重新加载页面，所以我没有使用它。

我有一个类似这样的简单表单:

    const [formData, setFormData] = useState({});
    .......
    function handleFormChange(event) {
        let data = formData;
        data[event.target.name] = event.target.value;
        setFormData(data);
    }
    ........
    <form id="search-form" >
       <TextField name="apiKey" label="API Key" onChange={handleFormChange} defaultValue={formData.apiKey} />
       <TextField name='itemName' label="Enter Item" onChange={handleFormChange} />
       <Button name='search-button' onClick={validate} >Search</Button>
    </form>

我不知道在 validate() 中添加什么来设置文本字段上的错误或执行搜索。我尝试将一个函数传递给 error Prop ，以检查是否填充了 errors 状态变量，我尝试使用 refs 设置错误状态但我看不到任何会设置错误状态的函数。

formData 变量将保存当前数据，因此很容易检查“此数据是否有效”，但对于我来说，我无法弄清楚如何手动触发错误状态。

我正在使用 React hooks 仅供引用

Answer 1

实现一个validation 函数并在您提交表单时调用它。为 error 维护一个状态，并在表单无效时更新它。使用 Material UI error prop 在您的字段旁边显示错误。

Working demo is here

代码片段

export default () => {
  const [formData, setFormData] = useState({
    apiKey: "test"
  });
  const [isFormInvalid, setIsFormInvalid] = useState(false);

  const validate = values => {
    if (values.apiKey !== "") {
      setIsFormInvalid(false);
    } else {
      setIsFormInvalid(true);
    }
  };
  function handleFormChange(event) {
    let data = formData;
    data[event.target.name] = event.target.value;
    setFormData(data);
  }
  const handleSubmit = e => {
    e.preventDefault();
    if (validate(formData)) {
      // proceed to submit
    }
  };
  return (
    <div className="col-sm-12">
      <h1>My Form</h1>
      <form onSubmit={handleSubmit} id="search-form">
        <TextField
          error={isFormInvalid}
          helperText={isFormInvalid && "api key required"}
          name="apiKey"
          label="API Key"
          onChange={handleFormChange}
          defaultValue={formData.apiKey}
        />

        <Button type="submit" name="search-button" onClick={validate}>
          Search
        </Button>
      </form>
    </div>
  );
};