第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

Redux 表單 - 在沒有按鈕但在字段更改時提交

Redux 表單 - 在沒有按鈕但在字段更改時提交

ITMISS 2023-04-14 15:33:55
我正在創(chuàng)建一個帶有 material ui 輸入的 redux-form shell——我正在嘗試創(chuàng)建一個 genericForm 處理程序,它將允許可以將字段和按鈕對象泵入組件——我現(xiàn)在需要創(chuàng)建一個沒有提交按鈕的表單由于設計 - 但如果沒有按鈕,則能夠在字段更改時提交表單。我有一個 handleChange 函數(shù),它將監(jiān)聽所有字段類型的 onChange 事件——并帶回字段名和新值——它現(xiàn)在可以知道表單是否有按鈕——但我不確定在哪里以及如何開發(fā)它如果字段發(fā)生更改,進一步將數(shù)據(jù)提交給父級https://redux-form.com/6.0.0-alpha.7/examples/asyncvalidation/FormShell.jsimport React from 'react';import { reduxForm } from 'redux-form';import FieldMaker from './FieldMaker';import ButtonMaker from './ButtonMaker';const FormShell = props => {  const { handleSubmit, pristine, reset, previousPage, submitting } = props  return (    <form onSubmit={handleSubmit}>      <FieldMaker fields={props.fields} hasButtons={props.buttons.length > 0? true: false} />      <ButtonMaker buttons={props.buttons} pristine={pristine} submitting={submitting} reset={reset} previousPage={previousPage} />    </form>  )}export default reduxForm()(FormShell)通用表單.js      <FormShell         initialValues={this.props.initialValues}         enableReinitialize={true}//allow form to be reinitialized        fields={this.props.fields}         buttons={this.props.buttons}        form={this.state.uuid}// a unique identifier for this form        validate={this.validateHandler}// <--- validation function given to redux-form        warn={this.warnHandler}//<--- warning function given to redux-form        onSubmit={this.submit}        previousPage={this.props.previousPage}        destroyOnUnmount={this.props.destroyOnUnmount}// <------ preserve form data        forceUnregisterOnUnmount={this.props.forceUnregisterOnUnmount}// <------ unregister fields on unmount       />
查看完整描述

1 回答

?
喵喵時光機

TA貢獻1846條經(jīng)驗 獲得超7個贊

我把它變成了一個組件并添加了一個函數(shù),該函數(shù)從 FieldMaker 組件中獲取字段更改


import React, { Component } from 'react';

import { reduxForm } from 'redux-form';


import FieldMaker from './FieldMaker';

import ButtonMaker from './ButtonMaker';


class FormShell extends Component {

 

 constructor(props, context) {

    super(props, context);

    this.fieldChanged = this.fieldChanged.bind(this);

 }


  fieldChanged(field, value){

      console.log("Fields have changed", field, value);


      //if it doesn't have any submit buttons -- then submit the form on change of fields

      if(!this.props.buttons.length > 0){

        console.log("submit the form as a buttonless form");


        setTimeout(() => {

          this.props.handleSubmit();

        }, 1);        

      }

  }


 render(){

  const { handleSubmit, pristine, reset, previousPage, submitting } = this.props


  console.log("THIS FORM SHELL PROPS", this.props);

  return (

    <form onSubmit={handleSubmit}>

      <FieldMaker fields={this.props.fields} fieldChanged={this.fieldChanged} />

      <ButtonMaker buttons={this.props.buttons} pristine={pristine} submitting={submitting} reset={reset} previousPage={previousPage} />

    </form>

  )

 }



}





export default reduxForm()(FormShell)


查看完整回答
反對 回復 2023-04-14
  • 1 回答
  • 0 關注
  • 125 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網(wǎng)微信公眾號