在 Formik 中设置默认值字段数组

Question

我正在使用Formik来构建我的表单。

我的表单有三个文本区域和一个选择下拉列表

对于选择下拉列表，我使用了IssueSelect(作为 Formik 中的FieldArray(。

IssueSelect，我用于创建和更新表单。

我的组件如下所示：

const IssueSelect = ({ values }) => (

<FieldArray
name="issues"
render={({ remove, insert, push }) => (
<div>
{values.issues && values.issues.length > 0 ? (
values.issues.map((iselected, index) => (
<div key={uuidv1()}>
<div>
<Field
value={iselected.id}
component="select"
name={`issues.${index}`}
>
{issues.map(issue => (
<option key={issue.id} value={issue.id}>
{issue.name}
</option>
))}
</Field>
</div>
<div>
<button onClick={() => remove(index)}>
<b> - </b>
</button>
<button onClick={() => insert(index, issues[0].id)}>
<b> + </b>
</button>
</div>
</div>
))
) : (
<button onClick={() => push(issues[0].id)}>
<b> + </b> Add new issue
</button>
)}
</div>
)}
/>
);
export default IssueSelect;

在创建表单中，一切都运行良好。

但是更新表单，我将 initialValue 传递给IssueSelect组件，它正确显示了我传递的数据。但是我无法更改选择框中的选项。

我通过传递value={iselected.id}设置了默认值 当我传递这个道具时，在创建形式中。它不再起作用了。

你可以检查我的代码和框，看看我的意思： https://codesandbox.io/s/rr1o8x3ppq

提前谢谢你。

Answer 1

<Field 
component="select" 
name="select" 
className={'form-control'}
variant="outlined">
<option value='one' >One</option>
<option value='two'>Two</option>
<option value='three'>Three</option>
</Field>

要设置为默认选项的选项需要为第一个选项标记编写。它将设置为默认选项。成功了。

Answer 2

const MySelect = ({ label,list, ...props }) => {
const [field, meta] = useField(props);
return (
<>
<Label for={props.id || props.name}>{label}</Label>
<select {...field} {...props} >
{list.map((e, i)=> <option key={i} value={e}>{e}</option>)}
</select>
{meta.touched && meta.error ? (
<div className="error">{meta.error}</div>
) : null}
</>
)
};

像这样使用它

<Formik initialValues={{
period: data.period
}}
>
<Form >
<MySelect label="period"  list={[ 'DAY','WEEK','MONTH']} name="period"/>
</Form>
</Formik>

其中数据是您在显示此表单之前可能从某处获取的内容。