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

Question

我正在制作一个关于 React 的简单注册页面并使用 Material UI。但是用户总是会用我的代码得到红色的 TextField。

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

a picture of the sign up page

这是我当前的代码

         <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 : 'initial'
   *   0 : 'invalid'
   *   1 : 'valid'
   */
  const [validation, setValidation] = useState({
    firstName: -1,
    lastName: -1
  });

做一个函数，在input on change时验证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 }));
  };

当提交事件或其他事件触发时，检查所有验证状态，将 -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);
    }
  };

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
        />

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

How to wait for user input in TextField before it turns red with Material UI

frontend

textfield

reactjs

material-ui

代码片段

完整代码示例：