我有一个表格，其中包含来自某个国家/地区的一些数据。默认情况下，数据是只读的，如果用户想改变值，点击编辑按钮。
问题是我无法编辑TextInput 中的值，默认情况下，值value 已经预先定义。我尝试通过onChange()编辑值，但不起作用。
我输入的所有内容都不会出现在输入字段中。
这是我的代码，我输入了 CodeSandBox：https://codesandbox.io/s/polished-water-muq69?file=/src/App.js
我正在使用来自react-material 的TextField。
有人可以帮我更新它的价值观吗？提前谢谢你。
【问题讨论】：
标签： javascript reactjs react-material
正如其他人所说，问题在于您需要 onChange 和 value 指向状态中的相同值/变量。
更进一步，我将清除所有这些变量的状态并仅使用一种方法来更改属性（例如，如果您有很多字段并且代码足够长）
const changeField = (name, value) => {
let newCountryInfo = [...countryInfo];
newCountryInfo[0].data.Country[0][name] = value;
setCountry(newCountryInfo);
};
并且在每个TextField 中，根据字段添加如下内容
onChange={event => {
changeField("name", event.target.value);
}}
【讨论】：
问题就在这里：
value={item.data.Country[0].name}
您在value 属性中设置的任何内容都将保留在该属性中。因此，不是在此处传递您的 API 响应，而是在其中传递一个状态值，并在输入值更改时更新该状态（2 路数据绑定）。它会解决这个问题。
你必须做出的改变：
const [countryName, setCountryName] = useState("");
onChange={event => {
setCountryName(event.target.value); // This will update the state
}}
value={countryName} // updated state value is used here
【讨论】：
defaultValue
使用 State 属性作为值
const [countryName, setCountryName] = useState("");
<TextField
className={classes.field}
disabled={disabledField}
label="Name"
value={countryName}
onChange={event => {
setCountryName(event.target.value);
}}
variant="outlined"
InputLabelProps={{
shrink: true
}}
/>
在 useState("") 内部，定义初始值或预定义值。
【讨论】：
我不是 React 专家，但似乎 React 组件覆盖了所有正在输入的更改。您可以在开发控制台上看到它，只需删除 value="brazil" 并尝试输入一些内容，value="brazil" 将弹出回输入标签。 我可以建议用占位符替换值。这样，用户仍然可以看到旧值，并且可以输入新值。
【讨论】：