web-dev-qa-db-ja.com

ReactでFormikでカスタム入力を使用する方法は？

Formik 内で DatePicker を使用しようとしています。しかし、DatePickerの日付をクリックしても、フォームの値は変更されません。代わりに、私はこのエラーを受け取りました：

不明なTypeError：e.persistはFormik._this.handleChangeの関数ではありません（formik.es6.js：5960）

私はコードを短くします、コードは以下です

const SomeComponent = () => (
    <Formik
        render={({
            values,
            handleSubmit,
            handleChange,
            setFieldValue
        }) => {
            return (
                <div>
                    <form onSubmit={handleSubmit}>
                        <DatePicker
                            name={'joinedAt'}
                            value={values['joinedAt']}
                            onChange={handleChange}
                        />
                    </form>
                </div>
            )
        }}
    />
)

いくつかのドキュメントをグーグルで検索しました https://github.com/jaredpalmer/formik/issues/187 および https://github.com/jaredpalmer/formik/issues/86

だから私は以下のようにしようとしましたが、うまくいきません。

 ...setFieldValue

 <DatePicker
   name={'joinedAt'}
   value={values['joinedAt']}
   onChange={setFieldValue}
 />
reactjsreact-nativematerial-uiformik
14
Juntae

私はこれを次のように解決します

<DatePicker
   name={'joinedAt'}
   value={values['joinedAt']}
   onChange={e => setFieldValue('joinedAt', e)}
 />
27
Juntae

Htmlプリミティブ入力フィールドの場合、handleChangeはチャームのように機能しますが、カスタムコンポーネントの場合は、setFieldValueを使用して値を強制的に変更する必要があります。

onChange={e => setFieldValue('joinedAt', e)}
0
Imdadul Huq Naim

より深いネストがある場合は、Formik Field を使用する必要があります。例：


<Formik
    validationSchema={schema}
    initialValues={initialValues}
    onSubmit={(values, actions) => {}}
>

  <Field name="colors" component={ColorsEditor}  colors={colorArray}/>
</Formik>


const ColorsEditor = ({ field, colors, form, ...props }) => {

    return (
        <div>
            <Button onClick={() => form.setFieldValue('colors', "myValue")}>
            </Button>
        </div>
    )
}

そのため、Fieldコンポーネントにはすでにフォームが含まれており、必要な場所で使用できるsetFieldValueが存在します。また、エラーと追加のカスタマイズに必要なフィールドも含まれます。

0
Hugo Gresse

受け入れられた答えは私にとっては機能せず、選択された日付を表示しませんでした。ほぼ1年が経過しているため、実装に変更が加えられる可能性があります。これはtoDateString()を使用して修正できますが、

<DatePicker
   name={'joinedAt'}
   value={values['joinedAt']}
   onChange={e => setFieldValue('joinedAt', e.toDateString())}
 />
0
brijmcq