无法输入 React TextField Input

Question

我已经从 Material-UI 添加了一个简单的 TextField 到我的登录页面，但无法在 React 输入字段中键入。我不确定是什么导致了这个问题，并仔细检查了以下问题：

，共 onChange（不是 onchange）
Input value must be the state
this.state 对比 state；前者导致 TypeError: Cannot read properties of undefined (reading 'state').
type="text" 对比 type="number"；这两个选项都不允许在文本字段中输入

下面是我的 TextField 代码，声明 state，并处理输入字段的变化。

 import TextField from '@material-ui/core/TextField';
...
 const [state, setState] = useState({
    ImageNumber: '',
  });

  const handleChange = (event) => {
    setState({
      ...state,
      [event.target.number]: event.target.value,
    });
  };
...
    <TextField label="" number="ImageNumber" type="text" value={state.ImageNumber} variant="outlined" onChange={handleChange} />

Answer 1

保持状态精简（不要将状态指定为对象）
将事件对象传递给 handleChange 方法

 import TextField from '@material-ui/core/TextField';
...
 const [state, setState] = useState("");

  const handleChange = (event) => {
    setState(event.target.value);
  };
...
    <TextField label="" number="ImageNumber" type="text" value={state} variant="outlined" onChange={(e) => handleChange(e)} />

Answer 2

 import TextField from '@material-ui/core/TextField';
...
 const [state, setState] = useState({
    ImageNumber: '',
  });

  const handleChange = (event) => {
    setState({
      ...state,
      [event.target.name]: event.target.value,
    });
  };
...
    <TextField label="" name="ImageNumber" type="text" value={state.ImageNumber} variant="outlined" onChange={handleChange} />

代替不存在的 <input /> 元素道具 number，您可以使用 name 属性，它不应显示 undefined.

无法输入 React TextField Input

Can't type in React TextField Input

textfield

reactjs