web-dev-qa-db-ja.com

React Formikのバインド外部ボタンをバインドする<formik>でonsubmit関数でクリック

<Form>または<Formik>タグの外側にある外部ボタンを使用してフォームを送信しようとしています。

次のスクリーンショットに示すように、私のボタンはBootstrap> Modal Footerセクションにあり、フォームタグの外側にあります。ユーザーがSubmitボタンをクリックしたときにフォームを送信しようとしています。

enter image description here

次のような類似のコードを見てください。私はそれを codesandbox にアップロードしました。

function App() {
      return (
        <div className="App">
          <Formik
            initialValues={{
              date: '10/03/2019',
              workoutType: "Running",
              calories: 300
            }}
            onSubmit={values => {
              console.log(values);
            }}
            render={({ values }) => {
              return (
                <React.Fragment>
                  <Form>
                    Date: <Field name="date" />
                    <br />
                    Type: <Field name="workoutType" />
                    <br />                
                    Calories: <Field name="calories" />
                    <br />  
                    <button type="submit">Submit</button>
                  </Form>
                  <hr />
                  <br />
                  <button type="submit" onClick={() => this.props.onSubmit}>
                    Button Outside Form
                  </button>
                </React.Fragment>
              );
            }}
          />
        </div>
      );
    }

ボタンがフォームの外側にあるので、送信動作を引き起こさず、このボタンの動作とFormik OnSubmitメソッドを接続する方法がわかりません。フォームタグ内にそのボタンを移動した場合は、予想通りに機能し、特別なことをする必要はありません。

私はこのようなPOST React Formik Usectform Outicalを使用してください 。しかし、私は本当にそれがどのように機能するかを理解することができませんでした。

投稿に記載されているように、ボタンクリック操作をonClick={() => this.props.onSubmit}のようなクリックアクションを綴じました。しかし、それは何もしたり、エラーを見せたりしていません。

フォルミクの 'onsubmit'関数を使って送信ボタンをフォームの外側に綴じる方法をお手伝いできますか。

reactjssubmitformik
6
TTCG

submitForm関数に渡された引数のプロパティとしてrenderメソッドにアクセスできるようです。 button 'onClick handlerでそれを呼び出すだけです。

render={({ submitForm, ...restOfProps}) => {
    console.log('restOfProps', restOfProps);

    return (
        <React.Fragment>
            <Form>
            Date: <Field name="date" />
            <br />
            Type: <Field name="workoutType" />
            <br />                
            Calories: <Field name="calories" />
            <br />  
            <button type="submit">Submit</button>
            </Form>
            <hr />
            <br />
            <button type="submit" onClick={submitForm}>
            Button Outside Form
            </button>
        </React.Fragment>
    );
}}
 _
3
cantuket

FormikのレンダリングはあなたにコールバックパラメータhandleSubmitを与えます。これを<buttonに割り当てます。

buttonがフォームにないので、そのタイプを<button type="button"...に変更し、onClickをonClick={handleSubmit}に割り当てます。

フォローのようにレンダリングを更新する、

render={({ values, handleSubmit }) => {
  return (
    <React.Fragment>
      <Form>
        Date: <Field name="date" />
        <br />
        Type: <Field name="workoutType" />
        <br />
        Calories: <Field name="calories" />
        <br />
        <button type="submit">Submit</button>
      </Form>
      <hr />
      <br />
      <button type="button" onClick={handleSubmit}>
        Button Outside Form
        </button>
    </React.Fragment>
  );
}}
1
Ponleu

これは、HandleSubmit関数が呼び出されないため、onClick={() => this.props.onSubmit}をonClick={props.handleSubmit}に置き換えるためです。

編集：もう少し指示が必要なように見えますので、リンクコードサンドボックスの編集版です。正しい小道具はhandleSubmitです。

https://codesandbox.io/s/qz2jnlp929

0
Jose Munoz