Question

我正在使用React最终表单来验证我的表单，并且可以正常工作。我正在调用变更处理程序来设置输入字段的状态，但似乎没有设置状态。我们如何以最终形式实现它。

我尝试将onchange处理程序作为props传递给InputType，但随后做出的最终形式验证却无法按预期进行

import {Form, Field} from 'react-final-form';
class UserDetails extends Component {

    state = {
      firstName: '',
      lastName: '',
      emailAddress: '',
      password: '',
      confirmPassword: '',
    }

showConsentForm = () =>

     Here I want to get  each field value but they are coming blank.

It looks to me that `setUserDetails` is never getting called using react-final-form

 setUserDetails = (e) => {
      const value = e.target.type === 'checkbox' ? e.target.checked : e.target.value;
      this.setState({[e.target.name]: value})
    }

render () {
      const {t: translate} = this.props;

      return (
        <Form
          onSubmit={() => this.showConsentForm()}
          render={({handleSubmit, invalid}) => (
            <form onSubmit={handleSubmit}>
              {this.state.showDetailsPage && <div>
                <div className="hw-block hw-block--mb">
                  <h2>{translate('register.heading')}</h2>
                </div>
                <div className="hw-block hw-block--mb">
                  <h4>{translate('register.detailsPageText')}</h4>
                </div>
                <p>{translate('register.firstName')}</p>
                <div className="hw-block hw-block--mb-smaller">
                  <Field type="text" value={this.state.firstName} component={InputType} validate={composeValidators(required, fieldLength(2, 60))}
                    placeholder={translate('register.firstNamePlaceholder')} name="firstName"
                    onChange={(e) => {
                      const value = e.target.type === 'checkbox' ? e.target.checked : e.target.value;
                      this.setState({[e.target.name]: value})
                    }}/>
                </div>
                <p>{translate('register.surname')}</p>
                <div className="hw-block hw-block--mb-smaller">
                  <Field type="text" value={this.state.lastName}
                    placeholder={translate('register.surnamePlaceHolder')} component={InputType} validate={composeValidators(required, fieldLength(2, 60))}  name="lastName"
                    onChange={(e) => this.setUserDetails(e)}/>
                </div>
                <p>{translate('register.email')}</p>
                <div className="hw-block hw-block--mb-smaller">
                  <Field type="email" value={this.state.emailAddress}
                    placeholder={translate('register.emailPlaceHolder')} component={InputType} validate={composeValidators(required, validateEmail)} name="emailAddress"
                    onChange={(e) => this.setUserDetails(e)}/>
                </div>
                <p>{translate('register.password')}</p>
                <div className="hw-block hw-block--mb-smaller">
                  <div className="hw-password" data-hw-password>
                    <Field type="password" value={this.state.password}
                      placeholder={translate('register.passwordPlaceHolder')} component={InputType} validate={required} name="password"
                      onChange={(e) => this.setUserDetails(e)}/>

                  </div>
                </div>
                <p>{translate('register.confirmPassword')}</p>
                <div className="hw-block hw-block--mb-smaller">
                  <div className="hw-password" data-hw-password>
                    <Field type="password" value={this.state.confirmPassword} component={InputType}
                      placeholder={translate('register.confirmPasswordPlaceHolder')} validate={required}
                      name="confirmPassword" onChange={(e) => this.setUserDetails(e)}/>

                  </div>
                </div>

                <div className="hw-block hw-block--mb-smaller">

                  <label className="hw-checkbox">
                    <p className="hw-text-small">{translate('register.accept')} <a target="_blank"
                      href="https://abcd/etc"
                      className="hw-link">{translate('register.terms')}</a> {translate('register.conditions')}
                    </p>
                    <input type="checkbox" name="acceptTerms" onClick={(e) => this.setUserDetails(e)}/>
                    <i className="hw-checkbox__indicator"></i>
                  </label>
                </div>
                <div className="hw-block hw-block--mb-smaller">
                  <button className="hw-button hw-button--primary" disabled={invalid} >{translate('register.continue')}</button>
                  <button className="hw-button hw-button--secondary secondary-button-margin"
                    onClick={homePage}>{translate('register.cancel')}</button>
                </div>
              </div>}

            </form>)}
        />
      )
    }
}

const InputType = ({
  input,
  type,
  placeholder,
  value,
  meta: { touched, error },
}) => (

  <React.Fragment>
    <input {...input} type={type} value={value} placeholder={placeholder}
      className={(error) ? 'hw-input--error hw-input' : 'hw-input' }/>
    { touched && error &&
        <span className="hw-error">
          {error}
        </span>
    }
  </React.Fragment>
)```

Answer 1

React Final Form为您处理所有的价值存储。您不需要做任何onChange的事情。这是React Final Form的主要工作：管理表单值，这样您就不必一直setState。我不清楚您要完成的目标，因此我无法真正为您提供进一步的帮助。 RFF内置了所有e.target.type === 'checkbox'逻辑。

我们如何在使用React最终形式时在组件中设置状态

1 个答案: