原始功能不工作redux形式

时间:2017-09-08 10:17:47

标签: reactjs redux-form react-bootstrap

我开始使用redux-form和react-bootstrap。我已经在我的表单中进行了验证,我的自定义验证工作正常,但我已经从this doc给出了原始条件,它对我不起作用。下面是我的代码,让我知道我哪里出错了?我需要添加任何东西吗? 如果有人让我知道渲染字段对我有什么影响吗?

const renderField = ({
  input,
  label,
  type,
  meta: { touched, error, warning }
}) => (
  <div>
    <label>{label}</label>
    <div>
      <input {...input} placeholder={label} type={type} />
      {touched &&
        ((error && <span>{error}</span>) ||
          (warning && <span>{warning}</span>))}
    </div>
  </div>
);
class Duplicate extends React.Component {
  constructor(...args) {
    super(...args);
    this.state = {
      open: false,
      showModal: false
    };
  }
  saveDuplicate = value => {
    if ('[default]'.includes(value.duplicateName)) {
      throw new SubmissionError({
        duplicateName: 'User does not exist',
        _error: 'Login failed!'
      });
    }
    console.log('value on submit', value);
  };

  close = () => this.setState({ showModal: false });
  openModal = () => this.setState({ showModal: true });
  render() {
    console.log('this props in duplicate', this.props);
    const required = value => (value ? undefined : 'Required');
    const { handleSubmit, pristine, reset, submitting } = this.props;

    return (
      <div className="scenario_btn">
        <Button
          onClick={this.openModal}
          bsStyle="danger"
          className="scenario_mangt"
        >
          Duplicate
        </Button>
        <Modal
          aria-labelledby="modal-label"
          show={this.state.showModal}
          onHide={this.close}
        >
          <form onSubmit={handleSubmit(this.saveDuplicate)}>
            <Field
              name="duplicateName"
              type="text"
              component={renderField}
              label="name"
              validate={[required]}
            />


            <div>
              <button type="submit" disabled={submitting}>
                Save
              </button>
              <button
                type="button"
                disabled={pristine || submitting}
                onClick={reset}
              >
                Cancel
              </button>
            </div>
          </form>
        </Modal>
      </div>
    );
  }
}
export default reduxForm({
  form: 'duplicatForm' // a unique identifier for this form
})(Duplicate);

0 个答案:

没有答案