Question

有没有办法传递一些初始值并在单击选项卡时更新它们并仅验证一组特定的字段

import React, { Component } from 'react'
import { connect } from 'react-redux'
import {Field,reduxForm} from 'redux-form'
import { selectreport, decrementStep } from '../../actions.js'

class Step1 extends Component {
  constructor (props) {
    super(props)

    this.handleChangeTab = this.handleChangeTab.bind(this)
    this.stepBack = this.stepBack.bind(this)
  }
  stepBack (e) {
    e.preventDefault()
    console.log('reduce step by 1')
    this.props.dispatch(decrementStep(this.props.step))
  }
  handleChangeTab (e) {
    const { title: key } = e.target
    console.log('click values are ', key)
    this.props.dispatch(selectreport(key))
  }

  renderField(field){
    const className = `row form-group ${field.meta.touched && field.meta.error ? 'has-error' : ''}`;
    return(
      <div className=" col-xs-12 col-md-offset-3 col-md-9">
        <div className={className}>
          <label className="col-xs-12 col-lg-12">{field.label}</label>
          <input 
            type="text"
            placeholder={field.placeholder} 
            className="form-control" 
            {...field.input} />
          <div className="text-danger">
            {field.meta.touched ? field.meta.error : ''}
          </div>
        </div>
      </div>
      );
  }
  onSubmit(values){
    const { step, report } = this.props
  }
  render () {
    const { step, report, parsedAddress,handleSubmit } = this.props
    const { Line1, Line2} = parsedAddress
    let st = JSON.stringify(step)
    return (      
        <form className="" onSubmit={handleSubmit(this.onSubmit.bind(this))}>
          <div className="">
            <div className="row">
              <div className="col-xs-10 col-md-6 col-xs-offset-1 col-md-offset-3">Enter details.</div>
            </div>
            <div className="row">
              <div className="nav nav-pills col-xs-10 col-md-6 col-xs-offset-1 col-md-offset-3 PADD0">
                <div className={report == 'address' ? ('col-xs-6 active') : 'col-xs-6'}>
                  <a data-toggle="tab" href="#address" title="address" onClick={this.handleChangeTab}>Address</a></div>
                <div className={report == 'phone' ? 'col-xs-6 active' : 'col-xs-6'}>
                  <a data-toggle="tab" href="#phone" title="phone" onClick={this.handleChangeTab}>Phone</a></div>
              </div>
            </div>
            <div className="row">
              <div className="tab-content PADD20PX text-centered col-sm-offset-1 col-sm-10 col-md-offset-2 col-md-6 ">
                <div id="address" className={report == 'address' ? 'tab-pane fade in PADD20PX active' : 'tab-pane fade in PADD20PX'}>
                  <Field 
                    label="Address"
                    name="Line1"
                    placeholder="123 Sample Street"
                    component={this.renderField} 
                  />
                  <Field
                    label="address2" 
                    name="Line2"
                    placeholder="APT"
                    component={this.renderField} 
                  />
                </div>
                <div id="phone" className={report == 'phone' ? 'tab-pane fade in PADD20PX active' : 'tab-pane fade in PADD20PX'}>
                  <Field
                    label="PhoneNumber" 
                    name="phone"
                    placeholder="123.456.7890"
                    component={this.renderField} 
                  />
                </div>
              </div>
            </div>
          </div>
          <div className="row PADDBOX">
            <div className="col-xs-12">
              <div className="pull-left">
                <div className="pull-left">
                  <button type="button btn-rounded" onClick={this.stepBack} className="btn btn-default">Back</button>
                </div>
              </div>
              <div className="pull-right"><button type="submit">Search</button></div>
            </div>
          </div>

        </form>
      </div>
    )
  }
}
function validate(values,props){
    console.log("inside validate",props);
    const errors = {};
    if(!values.Line1){
        errors.Line1 = "Enter address";
    }
    if(!values.Line2){
        errors.Line2 = "Enter address";
    }
    if(!values.phone){
        errors.phone = "Enter phone number";
    }

    return errors;
}

function mapStateToProps (state) {
  return {
    step: state.step,
    parsedAddress: state.parsedAddress,
    report: state.report
  }
}


export default reduxForm({destroyOnUnmount: false,validate,form:'PostsnewForm'})(
  connect(mapStateToProps)(Step1)
  );

有两个标签，分别用于地址和电话。尝试在地址选项卡上提交表单，即使我通过了所有验证，因为电话选项卡上的验证失败，也无法提交

有没有办法将全局状态传递给validate函数，并根据全局状态的属性验证特定字段。

Answer 1

试试这个：

function validate(values) {
  // console.log(values) -> {title: 'asdf', categories: 'asdf', content: 'asdf'}
  const errors = {};

  // validate the inputs from 'values'
  if (!values.title || values.title.length < 3) {
    errors.title = "Enter a title that is at least 3 characters!";;
  }

  // if errors is empty, the form is fine to submit
  // If errors have any properties, redux form assumes form is invalid
  return errors;
}
if (!values.categories) {
    errors.categories = 'Enter some categories';
}
if (!values.content) {
    errors.content = 'Enter some content, please';
}

export default reduxForm({
  validate,
  form: 'PostsNewForm'
})(PostsNew);

您要确认的字段的if语句。

redux-form仅验证所选选项卡内容上的文件

1 个答案: