我需要为数组的每个名称呈现大量的输入,但问题是为每个呈现的输入动态创建useState
常量和onChange处理程序。我尝试为数组中的每个项创建handleChange
键,并将其传递给input onChange,但得到了“String而不是Function”错误。如何用另一种方法解决这个问题,同时避免代码重复?
export const myArr = [
{ name: "Crist", data: "crist", color: "lightblue", handleChange: "cristHandleChange"},
{ name: "Ruby", data: "ruby", color: "lightpink", handleChange: "rubyHandleChange"},
{ name: "Diamond", data: "diamond", color: "white", handleChange: "diamondHandleChange"},
];
export const myComponent = () => {
const [cristQuantity, setCristQuantity] = useState(0);
const [rubyQuantity, setRubyQuantity] = useState(0);
const [diamondQuantity, setDiamondQuantity] = useState(0);
function cristHandleChange(event) {
setCristQuantity(event.target.value);
}
function rubyHandleChange(event) {
setRubyQuantity(event.target.value);
}
function diamondHandleChange(event) {
setDiamondQuantity(event.target.value);
}
return (
<>
{myArr
? myArr.map((item, index) => (
<div className="main-inputs__wrapper" key={`item${index}`}>
<label htmlFor={item.data}>{item.name}</label>
<input
type="number"
name={item.data}
style={{ background: item.color }}
onChange={item.handleChange} //???
/>
</div>
))
: null}
</>
);
};
4条答案
按热度按时间6uxekuva1#
我还没有真正测试过这个,但这是我会做的事情,这将让你的方式。
juud5qan2#
您正在向
onChange
传递字符串(而不是函数),这导致了该问题。要修复此问题,可以将所有函数 Package 到另一个对象中
并调用
onChangeFunctions[item.handleChange]
,如下所示gdrx4gfi3#
首先,您可能希望使用React Hook Form这样的库来实现这一点,不过,如果这是唯一的表单,并且您不需要所有的花哨特性(或额外的bundle大小),您也可以这样做。
第一步是将表单数据存储在Object中,在此更改之后,您可以使用单个
useState({})
来存储和读取表单数据,从而大大简化了处理程序。例如:
n3h0vuf24#
您应该为所有输入创建一个处理程序,并将值保存在一个带有键的对象中,如item.data。第一个月