Как очистить форму после onChange() в компоненте Tab (React-final-form)

Question

Я разделил форму регистрации на вкладку 2 с помощью компонента Tab. (Телефон и электронная почта). Поэтому я хочу очистить всю форму при переходе между 2 вкладками

<Tabs variant="fullWidth" value={tabValue} onChange={this.handleChange}>
    <Tab label="Email" />
    <Tab label="Phone" />
 </Tabs>
 <SignUpForm
        handleChangeIndex={this.handleChangeIndex}
        sent={sent}
        theme={theme}
        tabValue={tabValue}
        classes={classes}
        history={this.props.history}
 />

Это мой SignUpForm:

<Mutation mutation={CREATE_USER}>
{(createUser, { data, loading, error }) => (
  <React.Fragment>
    <Form
      onSubmit={this.onSubmit({ createUser })}
      subscription={{ submitting: true }}
      validate={validate}
      decorators={[focusOnError]}
      initialValues={this.state.initData}
    >
      {({ handleSubmit, values, submitting, reset }) => (
        <form **ref={this.signupRef}** onSubmit={handleSubmit} className={classes.form} noValidate>
          {loading && <p>Loading...</p>}
          <SwipeableViews
            axis={theme.direction === 'rtl' ? 'x-reverse' : 'x'}
            index={tabValue}
            onChangeIndex={handleChangeIndex}
            style={{ marginBottom: '16px' }}
          >
            <TabContainer dir={theme.direction}>
              {tabValue === 0 ? <EmailFields submitting={submitting} sent={sent} /> : ' '}
            </TabContainer>
            <TabContainer dir={theme.direction}>
              {tabValue === 1 ? <PhoneFields submitting={submitting} sent={sent} /> : ' '}
            </TabContainer>
          </SwipeableViews>
          <ReCaptcha
            ref={this.recaptchaRef}
            size="normal"
            render="explicit"
            sitekey="6Lc8fIoUAAAAAEIelPYBBoehOd00PSDckbO75rhh"
            hl="vi"
            onloadCallback={this.onLoadRecaptcha}
            verifyCallback={this.verifyCallback}
          />
          {!this.state.verified && (
            <FormHelperText id="component-error-text" error>
              Vui lòng xác nhận bạn không phải là người máy
            </FormHelperText>
          )}
          <FormButton
            className={classes.button}
            disabled={submitting || sent}
            size="large"
            color="secondary"
            fullWidth
          >
            {submitting || sent ? 'Thực hiện...' : 'Đăng ký'}
          </FormButton>
          <FormSpy subscription={{ values: true }}>
            {({ values }) => <pre>{JSON.stringify(values, undefined, 2)}</pre>}
          </FormSpy>
        </form>
      )}
    </Form>
  </React.Fragment>
)}

Я пытался использовать this.signupRef.current.reset() но это не работает. Я очень стараюсь, но дело в том, что я не могу понять, как установить значения внутри окончательной формы реакции, чтобы они опустели после изменения вкладки. Или может использовать сброс ()

У любого есть идея использовать reset() - встроенную функцию в response-final-form или изменить значения prop, переданные в React final form, пожалуйста, дайте мне предложение.

Я использую response-final-form и material-ui.

Answer 1

Вам нужно назначить ссылку на SignUpForm. Когда вкладка будет изменена, она будет сброшена при помощи form.reset(). Пожалуйста, измените мой код в соответствии с вашим компонентом и дайте мне знать.

import React from 'react';

export default class YourComponent extends React.Component {
    constructor(props) {
        super(props);
        this.formRef = React.createRef();
    }

    handleChange(){
        this.formRef.current.form.reset();
    }

    render() {
        return (
            <div>
                <Tabs variant="fullWidth" value={tabValue} onChange={this.handleChange}>
                    <Tab label="Email"/>
                    <Tab label="Phone"/>
                </Tabs>
                <SignUpForm
                    ref={this.formRef}
                    handleChangeIndex={this.handleChangeIndex}
                    sent={sent}
                    theme={theme}
                    tabValue={tabValue}
                    classes={classes}
                    history={this.props.history}
                />
            </div>
        );
    }
}