React中Material-UI的TextField组件无法输入内容如何解决？

问题原因 #

你的输入框无法输入的核心原因是state没有被正确更新：你给TextField传入的自定义number属性没有被正确读取，导致setState时的动态键名为undefined，没有更新到ImageNumber字段，输入框绑定的value值始终不变，看起来就像无法输入。

修复方案 #

方案1：改用标准name属性（推荐，符合React表单开发规范） #

1. 将TextField的自定义number属性替换为标准的name属性
2. 将handleChange中读取属性的逻辑改为取event.target.name

修改后代码示例：

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

方案2：保留自定义number属性的适配方式 #

如果必须使用number作为自定义属性，需要把属性透传到原生输入框，同时用getAttribute读取：

const handleChange = (event) => {
  const key = event.target.getAttribute('number');
  setState({
    ...state,
    [key]: event.target.value,
  });
};

// TextField调用时用inputProps透传自定义属性
<TextField 
  label="" 
  inputProps={{ number: "ImageNumber" }}
  type="text" 
  value={state.ImageNumber} 
  variant="outlined" 
  onChange={handleChange} 
/>

内容的提问来源于stack exchange，提问作者Henrik