reactjs – 如何为react js表单提供验证

发布时间：2020-12-15 20:15:14 所属栏目：百科来源：网络整理

导读：如何为反应形式提供验证. 我采取了两个领域的形式.如果启用了两个字段,则只需启用保存按钮. import React from 'react'import { Button,Checkbox,Form } from 'semantic-ui-react'const FormExampleForm = () = ( Form Form.Field labelFirst Name/label inp

如何为反应形式提供验证.

我采取了两个领域的形式.如果启用了两个字段,则只需启用保存按钮.

import React from 'react'
import { Button,Checkbox,Form } from 'semantic-ui-react'

const FormExampleForm = () => (
  <Form>
    <Form.Field>
      <label>First Name</label>
      <input placeholder='First Name' />
    </Form.Field>
    <Form.Field>
      <label>Last Name</label>
      <input placeholder='Last Name' />
    </Form.Field>
    <Form.Field>
      <Checkbox label='I agree to the Terms and Conditions' />
    </Form.Field>
    <Button type='submit'>Submit</Button>
  </Form>
)

export default FormExampleForm

解决方法

在redux形式6.7中有一个名为pristine的简单属性,可用于执行此操作.但是,如果用户在至少一个输入字段中输入某个值,则提交按钮被激活.要实现这一点,您可能需要做这样的事情.

render() {
    // const { handleSubmit } = this.props;
    const {handleSubmit,pristine,reset,submitting} = this.props
    return (
      <form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
        <div>
            <label>First Name</label>
            <div>
              <Field name="firstName" component="input" type="text" placeholder="First Name"/>
            </div>
        </div>
      <button type="submit" className="btn btn-primary" disabled={pristine || submitting}>Submit</button>
      </form>
    );
  }
}

但是,如果您需要启用提交按钮,例如当用户在2个给定字段中输入值时,则会变得复杂.你需要做这样的事情.这是我的示例用例.表单有3个字段firstName,lastName和age.仅当用户在此处输入firstName和lastName输入字段的值时,才会激活提交按钮.请查看以下代码.

import React,{ Component } from 'react';
import { Field,reduxForm,formValueSelector } from 'redux-form';
import { connect } from 'react-redux';

class UserNew extends Component {
  constructor(props) {
    super(props);
    this.isSubmitEnabled = this.isSubmitEnabled.bind(this);
  }


  onSubmit(values) {
    console.log(values);
  }

  isSubmitEnabled() {
   // Access field values here and validate them
   const firstName = this.props.firstNameValue;
   const lastName = this.props.lastNameValue;
   if(firstName && lastName){
      return true;
   }
   return false;
 }

  render() {
    const { handleSubmit } = this.props;
    const isEnabled = this.isSubmitEnabled();


    return (
      <form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
      <div>
        <label>First Name</label>
        <div>
          <Field name="firstName" component="input" type="text" />
        </div>
      </div>
      <div>
        <label>Last Name</label>
        <div>
          <Field name="lastName" component="input" type="text" />
        </div>
      </div>
      <div>
        <label>Age</label>
        <div>
          <Field name="age" component="input" type="text" />
        </div>
      </div>
      <button type="submit" className="btn btn-primary" disabled={!isEnabled}>Submit</button>
      </form>
    );
  }
}


UserNew = reduxForm({
  form: 'UserNewForm'
})(
  UserNew
);

// Decorate with connect to read form values
const selector = formValueSelector('UserNewForm') // <-- same as form name
UserNew = connect(state => {
  const firstNameValue = selector(state,'firstName')
  const lastNameValue = selector(state,'lastName')
  return {
    firstNameValue,lastNameValue,}
})(UserNew)


export default UserNew;

要访问字段值,您需要在ReduxForms中使用formValueSelector.为此,您需要使用connect helper将表单连接到redux存储.

希望这可以帮助.快乐的编码！

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!