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

Question

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

我尝试将 onchange 处理程序作为 InputType 中的 props 传递，但随后 react 最终表单验证无法按预期工作

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 为您处理所有的值(value)存储。您不需要做任何这些 onChange 的事情。这是 React Final Form 的主要工作:管理您的表单值，这样您就不必一直在 setState 中。我不太清楚你想要完成什么，所以我真的无法进一步帮助你。 RFF 具有所有内置的 e.target.type === 'checkbox' 逻辑。