如何更改反应最终表单中复选框的格式

Question

我通过react最终表单实现了表单

const products=  [
{ label: "T Shirt", value: "tshirt" },
{ label: "White Mug", value: "cup" },
{ label: "G-Shock", value: "watch" },
{ label: "Hawaiian Shorts", value: "shorts" },
];
<>
<Form
onSubmit={onSubmit}
render={({ handleSubmit, pristine, invalid, values }) => (
<form onSubmit={handleSubmit} className="p-5">
{products &&
products.map((product, idx) => (
<div className="custom-control custom-checkbox" key={idx}>
<Field
name="state"
component="input"
type="checkbox"
value={product.value}
/>
<label
className="custom-control-label"
htmlFor={`customCheck1-${product.value}`}
>
{product.label}
</label>
</div>
))}
<button type="submit" disabled={pristine || invalid}>
Submit
</button>
<pre>{JSON.stringify(values, 0, 2)}</pre>
</form>
)}
/>
</>

如果我选择复选框，则选中的值显示值数组，如[tshirt，cup]，但我需要显示对象数组，如[｛label:"T恤"，value:"tshirt"｝，{label:"白杯子"，value:"杯子"}]我尝试了很多方法，但都没有成功。请帮我解决这个问题

Answer 1

值将始终是由"；值"；字段标记的属性。如果您想要产品阵列中的对象，可以执行以下

console.log(values.map(val => products.find(p => p.value === val)))

或者首先通过reduce&然后使用它。

const obj =products.reduce((map,p)=>{
map[value]=p
return map
},{})
console.log(values.map(v => productMap[v]))

Answer 2

为您的输入添加一个onchange方法。该方法必须考虑产品的价值。

const [selectedProducts, setSelectedProducts] = useState([]);
const handleChange = (value) =>{
const itemToAdd = products.find(product => product.value === value);
const index = selectedProducts.findIndex(item => item.value === value);
if (index === -1){
setSelectedProducts([...selectedProducts, products[index]])
}else {
const data = [...selectedProducts];
data.splice(index, 1);
setSelectedProducts(data);
}
}

jsx 的一些更改

<Field
onChange = {handleChange}
name="state"
component="input"
type="checkbox"
value={product.value}
checked = {selectedProducts.findIndex(item => item.value === value)!== -1}
/>