Question

我使用Tab组件将注册表单分成2个标签。（电话和电子邮件）。因此，我想在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()，但是它不起作用。我做了很多尝试，但问题是我无法弄清楚一旦Tab更改后，如何将最终表单中的值设置为空。或者可以使用reset（）

任何人都想使用reset（）-以react-final-form形式内置的函数或更改传递给React最终形式的值prop，请给我一个建议。

我正在使用react-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>
        );
    }
}

如何在Tab组件中的onChange（）之后清除表单（React-final-form）

1 个答案: