javascript - 设置 useState 对象值时使用 prop 值
问题描述
我正在使用反应钩子 useState 来更新对象。我有一个可重用的组件,它只是一个输入,我将 props 传递给它和一个更新状态的 onChange 处理程序。
我如何使用道具值“fooType”来动态更新状态?这fooType
在 fooType 之外起作用:e.target.value` 未被识别为变量。有没有办法重构它以这种方式工作?
输入组件:
const Input = (props) => {
const { foo, foos, setFoos, fooType } = props;
return (
<input type='text'
placeholder={ foo }
value={ foo }
onChange={ (e) => setFoos({ ...foos, fooType: e.target.value }) } />
);
};
这是我将道具传递给三个输入的文件
const InputGroup = (props) => {
// initial state
const [foos, setFoos] = useState({
foo1: 0, foo2: 0, foo3: 0
});
return (
<div>
<Input foo={ foos.foo1 }
fooType='foo1'
foos={ foos }
setFoos={ setFoos } />
<Input foo={ foos.foo2 }
fooType='foo2'
foos={ foos }
setFoos={ setFoos } />
<Input foo={ foos.foo3 }
fooType='foo3'
foos={ foos }
setFoos={ setFoos }/>
</div>
);
}
解决方案
您将要包围 [] 中的 fooType 以将变量设置为键值。
onChange={ (e) => setFoos({ ...foos, [fooType] : e.target.value }) } />
就您现在编写它的方式而言, fooType 被解释为一个新的键值。但是上述更改应该可以解决它。
推荐阅读
- javascript - 箭头函数不应返回赋值 no-return-assign
- python - python tkinter optionmenu的问题:只选择最后一项
- bash - 迭代替换文件中的字符串
- android - “重复课程”是什么意思?
- excel - Excel:从日期转换为时间范围
- python - 如何在保持程序化行选择的同时防止用户点击行选择?
- javascript - 如何使用默认参数为井字游戏中的第一个玩家随机化“X”和“O”符号?
- python - python - 从文件中提取关联的图标
- php - 在php中测试给定字符的大写或小写类型的最佳方法是什么?
- react-native - 滑动时如何做弹性动画?