如何使用 Material UI 在 TextField 变红之前等待用户输入

Question

我正在使用 React 和 Material UI 制作一个简单的注册页面。 但用户总是会得到带有我的代码的红色文本字段。

如何让它等待用户第一次尝试输入然后给出反馈（红色或不红色）？

注册页面的图片

这是我当前的代码

         <Box
            component="form"
            sx={{ '& > :not(style)': { m: 1, width: '25ch' } }}
            noValidate
            autoComplete="off"
          >
            <TextField
              id="outlined-basic"
              label="First Name"
              onChange={(event) => setFirstName(event.target.value)}
              variant="outlined"
              error={!firstName}
              required
            />
            <TextField
              id="outlined-basic"
              label="Last Name"
              onChange={(event) => setLastName(event.target.value)}
              variant="outlined"
              error={!lastName}
              required
            />
            <TextField
              id="outlined-basic"
              label="Home Number"
              onChange={(event) => setHomeNumber(event.target.value)}
              variant="outlined"
              type="tel"
              error={!homeNumber}
              required
            />
            <TextField
              id="outlined-basic"
              label="Address"
              onChange={(event) => setAddress(event.target.value)}
              variant="outlined"
              error={!address}
              required
            />
            <TextField
              id="outlined-basic"
              label="Email"
              onChange={(event) => setEmail(event.target.value)}
              variant="outlined"
              type="email"
              error={!email}
              required
            />
            <TextField
              id="outlined-password-input"
              label="Password"
              onChange={(event) => setPassword(event.target.value)}
              type="password"
              autoComplete="off"
              error={!password}
              required
            />
         </Box>

Answer 1

实现这个需求的方法有很多种，我使用其中一种并制作demo给大家。

代码片段

1. 添加验证状态（共有三种状态）是我的解决方案的核心。

  /**
   *  -1 : 'initial'
   *   0 : 'invalid'
   *   1 : 'valid'
   */
  const [validation, setValidation] = useState({
    firstName: -1,
    lastName: -1
  });

2. 创建一个函数，每当输入发生变化时验证 key 的值是否有效，并给出相应的验证状态。

  // Verify that the value for the key.
  const verify = (k, v) => {
    setValidation((prev) => ({ ...prev, [k]: v ? 1 : 0 }));
  };

  const handleInputOnChange = (e) => {
    const k = e.target.name;
    const v = e.target.value;
    // Verify that the value for the key.
    verify(k, v);
    setData((prev) => ({ ...prev, [k]: v }));
  };

3. 当提交事件或其他事件触发时，检查所有验证状态，将 -1 设置为 0，然后执行您想要的行为。

  const handleOnSubmit = () => {
    // when event trigger, check all validation if invalid set value to 0, and make red prompt.
    verifyAll();

    // check invalid
    if (Object.values(validation).some((v) => v !== 1)) {
      // if there is invalid value, do something.
      console.error("Invalid value.");
    } else {
      // if pass send data.
      console.info(data);
    }
  };

4. HTML 样式基于验证状态，如果为 0，则出错并变为红色。

        <TextField
          id="outlined-basic"
          name="firstName"
          label="First Name"
          onChange={handleInputOnChange}
          variant="outlined"
          // only validation === 0, changed to red(error).
          error={validation["firstName"] === 0}
          required
        />

完整代码示例：