如何修复编辑记录中的Redux表单验证错误

时间:2019-05-02 05:11:17

标签: reactjs redux redux-form

当我进入编辑表单页面并且提交表单而不进行任何更改时,它在所有字段中显示“必填”错误。

检查此图像中的错误。 Edit page image

这是我的编辑页面代码。不是所有的代码,而是一些代码。


const renderField = ({
  defaultValue,
  input,
  meta: { touched, error },
  ...others
}) => {
  const { value, ...newVal } = input;
  return (
    <div>
      <div>
        <input
          {...newVal}
          {...others}
          defaultValue={value ? value : defaultValue}
        />
        {touched && (error && <span style={{ color: "red" }}>{error}</span>)}
      </div>
    </div>
  );
};

class Edit extends Component {


  render() {
    const { user } = this.state;
    const { handleSubmit, submitting } = this.props;
    return (
      <div className="container">
        <div className="row">
          <section className="section section-register">
            <div className="valign-wrapper row register-box">
              <div className="col card hoverable s10 pull-s1 m6 pull-m3 l0 pull-l0">
                <form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}>
                  <div className="card-content">
                    <h5 className="grey-text text-darken-3">Sign Up</h5>
                    <div className="row">
                      <div className="input-field col s12">
                        <Field
                          placeholder="First Name"
                          id="firstName"
                          name="firstName"
                          type="text"
                          onChange={this.handleChange}
                          defaultValue={user.firstName}
                          component={renderField}
                          validate={required}
                        />
                      </div>

                    </div>
                  </div>
                  <div className="card-action right-align">
                    <button
                      className="btn waves-effect waves-light"
                      type="submit"
                      name="submit"
                      disabled={submitting}
                    >
                      Submit
                    </button>
                  </div>
                </form>
              </div>
            </div>
          </section>
        </div>
      </div>
    );
  }
}


任何人都可以找出问题所在吗?我找不到任何问题。

0 个答案:

没有答案