[英]useState() hook removes fields from the object when setting new value
[英]Use prop value when setting a useState object value
我正在使用反应钩子 useState 来更新 object。 我有一个可重用的组件,它只是一个输入,我将道具传递给它和一个更新 state 的 onChange 处理程序。
如何使用道具值“fooType”动态更新 state? 这是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 被解释为一个新的键值。 但是上述更改应该可以解决它。
将括号添加到您的 [fooType] 以使其成为 object 键
onChange={ (e) => setFoos({ ...foos, [fooType]: e.target.value }) }
这是一个沙盒,您可以使用它: https://codesandbox.io/s/exciting-ritchie-ijxxb
你得到了你的答案..但我建议你更好地解决这个问题。
输入组件:
const Input = props => {
const { index, fields, setFields } = props;
return (
<input type='text'
placeholder={ fields[index].placeHolder }
value={ fields[index].value }
onChange={ e => {
let fieldsCopy = fields.slice() // shallow copy
fields[index].value = e.target.value
setFields(fieldsCopy.slice())
} } />
);
};
对于您的 3 个组件代码-
const InputGroup = props => {
// initial state
const [fields, setFields] = useState([
{ value: 0, placeHolder: 'foo1' }
{ value: 0, placeHolder: 'foo2' }
{ value: 0, placeHolder: 'foo3' }
]);
return (
<div>
{
foos.map((element, index) => {
<Input
key={index}
index={ index }
fields={ fields }
setFields={ setFields }
/>
})
}
</div>
);
}
问是否不清楚
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.