[英]How can I access formik helpers insider formik wrapper component to set field value of a particular field
[英]Set default value Field Array in Formik
我正在使用Formik来构建我的表单。
我的表单有 3 个文本区域和 1 个选择下拉列表
对于选择下拉列表,我使用了IssueSelect
(作为FieldArray
中的 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;
在 Create Form 中,一切正常。
但是更新表单,我将 initialValue 传递给IssueSelect
组件,它正确显示了我传递的数据。 但我无法更改选择框中的选项。
我通过传递value={iselected.id}
设置默认值当我传递这个道具时,在创建表单中。 它不再起作用了。
您可以检查我的代码和框以确切了解我的意思: https ://codesandbox.io/s/rr1o8x3ppq
先感谢您。
<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>
要设置为默认选项的选项,需要写在第一个选项标签中。 它将设置为默认选项。 有效。
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>
其中数据是您在显示此表单之前可能从某处获取的内容。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.