Question

我有一个标识用户的简单页面，它由姓名和电子邮件组成。

class UserIdentification extends Component {
  constructor(props) {
    super(props);
    this.state = {
      Name: this.props.Name,
      Email: this.props.Email,
      emailErrors: ''
    };
  }

  isValid(showErrors, validate, errorsName, value) {
    let errors = [];

    for (let name of validate) {
      errors = errors.concat(validators[name](value));
    }

    if (showErrors) {
      this.setState({
        [errorsName]: errors.join(' ')
      });
    }
    console.log(errors);
    return !errors.length;
  }

  handleInputChange(name, event) {
    this.setState({
      [name]: event.target.value,
    });
  }

  onInputBlur(showErrors, validate, errorsName, value, action) {
    if (!this.isValid(showErrors, validate, errorsName, value))
      return;
    this.props.userIdentificationActions[action](value);
  }
  render() {
    return (
      <div className='row'>
        <form className='col s12'>
          <h5 className='flow-text'>Identification</h5>
          <div className='row'>
            <div className='input-field col s12'>
              <i className='material-icons prefix'>account_circle</i>
              <input
                value={this.props.Name}
                placeholder='Enter your name'
                id='person_name'
                onChange={this.handleInputChange.bind(this, 'Name')}
                onBlur={this.onInputBlur.bind(this, false, [], '', this.state.Name, 'setName')}
                type='text' />
              <label className='active' htmlFor='person_name'>Name</label>
            </div>
          </div>
          <div className='row'>
            <div className='input-field col s12'>
              <i className='material-icons prefix'>email</i>
              <input
                value={this.props.Email}
                placeholder='e.g. myemail@example.com'
                id='email'
                type='email'
                onChange={this.handleInputChange.bind(this, 'Email')}
                onBlur={this.onInputBlur.bind(this, true, ['email'], 'emailErrors', this.state.Email, 'setEmail')}
                className={this.state.emailErrors.length ? 'invalid' : 'valid'}
                />
              <label className='active' data-error={this.state.emailErrors} htmlFor='email'>Email</label>
            </div>
          </div>
        </form>
      </div>
    );
  }
}


function mapStateToProps(state) {
  return {
    Name: state.userIentification.Name,
    Email: state.userIdentification.Email,
  }
}

function mapDispatchToProps(dispatch) {
  return {
    userIdentificationActions: bindActionCreators(userIdentificationActions, dispatch)
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(userIdentification)

单个字段的验证工作非常完美。

这是我的行动：

export function setName(name) {
  return {
    type: actionTypes.SET_NAME,
    payload: name
  }
}

export function setEmail(email) {
  return {
    type: actionTypes.SET_EMAIL,
    payload: email
  }
}

和reducer：

const initialState = {
  Name: '',
  Email: ''
}

export default function identification(state = initialState, action) {
  switch (action.type) {
    case actionTypes.SET_NAME:
      return { ...state, Name: action.payload };
    case actionTypes.SET_EMAIL:
      return { ...state, Email: action.payload };
    default:
      return state;
  }
}

我想要的是对商店进行验证，例如，当名称不为空且电子邮件有效时，然后发送一些所需的操作。

我该怎么做以及在哪里实现此功能？

在React和Redux中存储验证

0 个答案: