web-dev-qa-db-ja.com

React Formik FieldonChangeイベントハンドル

React FormikでonChangefor Fieldコンポーネントを処理しようとしていますが、機能しません。Formikコンポーネントの外部でも次の方法で処理しようとしました。

handleChange(e) {
  console.log('changing');
}
<Field type="radio" name="players" value="1" onChange={e => this.handleChange(e)}/>

しかし、私は警告を受けています：

コンポーネントが、制御対象のテキスト型の制御されていない入力を変更しています。入力要素は、非制御から制御に（またはその逆に）切り替えてはなりません。

今のところ、私のコードは次のようになっています。

<Formik
  onChange={() => {
    console.log('changing');
  }}
  onSubmit={(values) => {
    console.log('submitted');
  }}
>
{({ isSubmitting, handleChange }) => (
  <Form>
    <InputWrapper>
       <span>1</span>
       <Field type="radio" name="players" value="1" onChange={handleChange}/>
       <span>2</span>
       <Field type="radio" name="players" value="2" onChange={handleChange}/>
    </InputWrapper>
    <button type="submit" disabled={isSubmitting}>
       {isSubmitting ? 'Loading..' : 'Start'}
    </button>
  </Form>
)}
</Formik>

ヒント/アイデアはありますか？

javascriptreactjsformik
5
Mindfuc

OnBlur：handleBlurをFormikフィールドに導入する際に私が見つけた問題の1つは、Formik検証をオーバーライドすることです。

使用する onKeyUp={handleChange}

これは前述の問題を解決しました

2
Ray Yecko