如何在反应最终形式中更改复选框的格式

Question

我通过 react final form 实现了表单

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 Shirt", value: "tshirt" }, { label ：“白杯”，价值：“杯子”}] 我尝试了很多方法，但我没有任何运气。请帮我解决这个问题

Answer 1

values 将始终是由 Field 标记的“value”属性组成的数组。 如果您想要产品数组中的对象，您可以执行以下操作

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}
/>