reactjs - 在我的 React 组件 TextField 中,为什么即使我更改了值也始终保持不变?
问题描述
我正在尝试使用 material-ui 为我的 React 表单设计一个表单控件(TextField)。我想要一个 TextField 来表示传递给我的组件的对象“任务”的字段。我有
const MissionEditView = ({ mission, toListView }) => {
...
const { handleChange, values } = useForm(mission);
const recipientDisplayName = _.get(mission, "recipientDisplayName");
const props = { classes, mission };
function changeFormValue(name, value) {
handleChange({ target: { name, value } });
}
function handleChangeRecipientDisplayName(e) {
e.preventDefault();
console.log("value:" + e.target.value);
changeFormValue("recipientDisplayName", e.target.value);
}
...
<Grid item>
<TextField
className={`${classes.rootInput} ${classes.input}`}
id="recipientDisplayName"
value={recipientDisplayName}
placeholder="Recipient"
variant="outlined"
disabled={false}
onChange={handleChangeRecipientDisplayName}
fullWidth
/>
问题是,每当我尝试编辑文本字段组件时,都不会进行更新。我可以在 console.log 中看到正确输入的值,但 TextField 值仍然是加载组件时的值。如何调整内容以使我的更新反映在我的 TextField 中?
解决方案
您正在将value
TextField 的属性设置为通过mission
对象传入的初始值。所以它总是被设置为初始值。您需要从解构values
对象中获取值
onChange={values.recipientDisplayName}
推荐阅读
- laravel - Laravel 表单请求验证规则“必需”不适用于空值
- ios - 如何在 viewDidLoad 上调用 tableView?
- angular - 状态始终未定义
- python - 如何删除句子中连续重复的单词?
- javascript - 如何基于在 JavaScript 后端验证中间值来访问最外面的 JSON 对象值以及最里面的 JSON 对象值
- gitlab - 如何修复:GitLab 管道 - 无法启动
- ansible - Ansible - 将 json_query 的结果复制到文件的最佳方法
- c# - C++ 等价于 C# Encoding.ASCII.GetString()
- node.js - 如何使用 actions-on-google npm 包管理自杀意图
- task - openstack instance task_state 卡在关机状态,如何将其重置为 None