javascript - Redux 表单 - 如何在填充每个输入之前保持按钮禁用状态？

Question

我正在研究以下 react-redux 表单示例:

http://redux-form.com/6.0.0-alpha.4/examples/simple/

它以这种方式工作，如果用户至少填写了一个输入，则提交按钮被启用。

我只是想知道，是否有任何方法启用按钮仅当所有输入都已填充？

我没有在这里粘贴整个代码，因为首先它很长，其次它是一个实时预览示例。

谢谢!

Answer 1

我认为没有类似 pristine 或 dirty 的属性，但您可以使用 form reducer。假设您使用的是 redux form 6+，这样的东西应该可以工作:

connect((state) => {
  return {
    // assuming form is the reducer's name
    myForm: state.form.myForm
  }
})(

    reduxForm({
      form: 'myForm'
    })(({ handleSubmit, myForm }) => {
      // myForm.values contains all fields that have value.
      // myForm.fields contains all fields
      const len = (obj) => Object.keys(obj).length;
      const allFilled = len(myForm.values) === len(myForm.fields);
      console.log(allFilled);
      return (
        <form onSubmit={handleSubmit}>
          <Field
            name="text"
            component="input"         
          />
          <Field
            name="bar"
            component="input"          
          />
        </form>
      )
   })
);

稍微解释一下，redux 表单由 redux 支持，并将有关表单的所有信息保存在 redux 存储中。然后，您可以使用标准的 connect 函数将该信息连接到任何组件。在此示例中，我使用 fields 和 values 属性来检查是否所有字段都具有值。