设置useState对象值时使用道具值

Question

我正在使用react hooks useState来更新对象。我有一个可重用的组件，它只是一个输入，我正在将props传递给它，还有一个更新状态的onChange处理程序。

如何使用道具值"fooType"来动态更新状态？除fooType:e.target.value`中的fooType未被识别为变量外，此操作正在运行。有没有一种方法可以重构，使其以这种方式工作？

输入组件：

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>
);
}

Answer 1

您将想要在[]中包围fooType，以将变量设置为键值。

onChange={ (e) => setFoos({ ...foos, [fooType] : e.target.value }) } />

按照您现在编写的方式，fooType被解释为一个新的键值。但上述变化应该会解决问题。

Answer 2

在[fooType]中添加括号，使其成为对象键

onChange={ (e) => setFoos({ ...foos, [fooType]: e.target.value }) }

这里有一个沙盒，你可以玩它：https://codesandbox.io/s/exciting-ritchie-ijxxb

Answer 3

您得到了答案。。但我建议你对此采取更好的方法。

输入组件：

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>
);
}

询问是否不清楚