1

我使用 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}
 />

这是我的注册表格：

<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 最终形式的 values 属性，请给我一个建议。

我正在使用 react-final-form 和 material-ui。

4

1 回答 1

0

You need to assign a reference to SignUpForm.When tab is change, it will be reset by 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>
        );
    }
}
于 2019-01-16T18:13:15.820 回答