react formik如何从复选框组件传递值和id

Question

这是我的复选框组件:

function CheckBoxesControl(props) {
const { label, name, options, ...rest } = props;
return (
<div className='checkbox-control'>
<span className='checkbox-title'>{label}</span>
<div className='check-elements'>
<Field name={name}>
{({ field, form }) => {
return options.map((option) => {
return (
<React.Fragment key={option.key}>
<input
type='checkbox'
id={option.key}
{...field}
{...rest}
value={option.value}
checked={field.value.includes(option.value)}
/>
<label htmlFor={option.value}>{option.value}</label>
</React.Fragment>
);
});
}}
</Field>
</div>
<ErrorMessage component={TextError} name={name} />
</div>
);
}
export default CheckBoxesControl;

FormikControl的代码:

import React from 'react';
import CheckBoxesControl from './checkboxescontrol';
import RadioButtons from './radiobuttons';
function FormikControl(props) {
const { control, ...rest } = props;
switch (control) {
case 'radio':
return <RadioButtons {...rest} />;
case 'checkbox':
return <CheckBoxesControl {...rest} />;
default:
return null;
}
}
export default FormikControl;

和父组件:

<Formik
initialValues={formValues || initialValues}
validationSchema={validationSchema}
validateOnMount
onSubmit={onSubmit}
enableReinitialize 
>
{(formikProps) => {
return (
<Form>
<FormikControl
control='checkbox'
label='Some label'
name='somearray'
options={somearray}
/>

</Form>
</Formik>

somearray-这是一个数组，我从firestore，看起来像这样:[{键:"价值:"}]

我是一个初学者，所以请原谅我:
目前我能得到的是两个选项。值或选项。key
我想要的是从复选框发送到formik的值，看起来像这样:
[id: option]。Id, name: option。值]

可能吗?

Answer 1

可以，您可以尝试以下操作:

更改"值";输入<属性标签:值 xmlns:属性标签="#unknown">

上面的内容是一个JSON编码的字符串，因此为了获得单个值，您可以执行以下操作:

let result = JSON.parse(value);

返回的对象将具有以下形状:

result = {
id: option.key,
name: option.value,
}