时间戳

首页 > 解决方案 > React Formik 默认值

reactjs - React Formik 默认值

问题描述

我正在使用反应形式。我有一个下拉选择选项。选项工作正常，但我希望从下拉列表中将默认值设为免费。如果我在没有点击的情况下提交表单，它会给我的选项值为空白。下面是我的代码：

const defautValue="Free";
const options=["Premium","Gold","Free"]


<Field> 
  {(props: any)=>{
    const {field}=props;
    const defaultOption=<option key='default' value={defaultValue}>{defaultValue}</option>
    const option=options.map((i:string)=>{return (<option key={i} value={i}>{i}</option>)})
    const selectOptions=[defaultOption,...option]
    return (
       <div>
       <select value={field.value}{...field}>{selectOptions}</select>
       </div>
         )
  }}
</Field>

标签： reactjstypescript

解决方案

尝试删除 defaultOption、selectOptions 的手动设置，并使用formik.values、 或form.value，并defaultValue使用组件的initialValues设置Formik组件的 ：


<Formik
  initialValues={{selectedOption: "Free"}: YourFormData}
  onSubmit={(values, actions) => {console.log(values, actions)}}
>
  {formik => (
    <Form translate="yes">
      <Field name="selectedOption">
          {({ form, field }: FieldProps<YourFormData>) => {
          const options=["Premium","Gold","Free"].map((i:string)=>{return (<option key={i} value={i}>{i}</option>)})    
          return (
             <div>
                 <select {...field}>{options}</select>
             </div>
               )
        }}
      </Field>
    </Form>
    )}
</Formik>

字段的{...field}扩展运算符已经添加了“值”

<Field name="selectedOption">自动将selectedOptionformik 字段连接到<select>元素，包括onChange, onBlur,touched等。

或者您也可以使用as例如：

<Formik
    initialValues={{selectedOption: 'Free'}}
    onSubmit={(values, actions) => {
        setTimeout(() => {
            alert(JSON.stringify(values, null, 2));
            actions.setSubmitting(false);
        }, 1000);
    }}>{(props: FormikProps<any>) => (
    <Form>
        <Field as="select" name="selectedOption">
           {["Premium","Gold","Free"].map((i:string)=>(<option key={i} value={i}>{i}</option>))}
        </Field>
    </Form>
)}
</Formik>

文档：

推荐阅读