reactjs - 如何将文本字段设置为禁用，并且在键入时将再次启用？

Question

我如何编码这个文本字段的原始状态将被禁用，然后在输入时，它将被启用。那么该文本字段将是提交时唯一更新的文本字段吗？

 <form onSubmit={handleSubmit}>
                  <TextField
                    id="input"
                    margin="dense"
                    type="text"
                    label="Name"
                    placeholder={user.displayName}
                    value={displayName}
                    fullWidth
                    onChange={(e) => setdisplayName(e.target.value)}
                  />
                  <TextField
                    disabled
                    margin="dense"
                    type="text"
                    label="address"
                    value={address}
                    fullWidth
                    onChange={(e) => setAddress(e.target.value)}
                  />
            
                  <Button type="submit">Update</Button>
                </form>

标签： reactjsmaterial-ui

Answer 1

即使您禁用了一个输入，它仍然会在您每次输入时重新呈现（因为您在更改时设置了状态）。您可以像这样使用 ref 来防止不必要的渲染。

  const nameRef = useRef(null);
  const addressRef = useRef(null);
  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(nameRef.current.value);
    console.log(addressRef.current.value);

  };
  return (
    <div>
      <form onSubmit={handleSubmit}>
        <TextField
          id="input"
          margin="dense"
          type="text"
          label="Name"
          placeholder={user.displayName}
          fullWidth
          inputRef={nameRef}
        />
        <TextField
          margin="dense"
          type="text"
          label="address"
          fullWidth
          inputRef={addressRef}
        />

        <Button type="submit">Update</Button>
      </form>
)