3

フォームを検証するために反応最終フォームを使用していますが、正常に動作しています。入力フィールドの状態を設定するために変更ハンドラーを呼び出していますが、状態を設定していないようです.どうすれば反応する最終フォームでそれを達成できますか.

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>
)```
4

1 に答える 1

0

React Final Form は、すべての値ストレージを処理します。このようなことをする必要はありませんonChange。setStateこれが React Final Form の主な仕事です。フォームの値を管理して、常に ing する必要がないようにすることです。あなたが何を達成しようとしているのかがはっきりしないので、これ以上お手伝いすることはできません。RFF には、そのすべてのe.target.type === 'checkbox'ロジックが組み込まれています。

于 2019-05-31T13:26:10.543 に答える