Reactjs 在react redux表单中，如何禁用“提交”按钮，直到所有必填字段都未填写

在react应用程序上工作，我需要一个处理表单和验证的库，以下2个库出现在大多数搜索结果中

首先，不确定需要使用哪一个，所以尝试了后一个，并执行以下步骤

请检查

1） 在reducers.js的

combineReducers

中使用

createForms（）

2） 在RegisterPage.js中，我使用了和组件来创建表单

class RegisterPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      user: {
        firstName: '',
        lastName: '',
        username: '',
        email: '',
        password: '',
        confirmPassword: ''
      },
      submitted: false
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    const { name, value } = event.target;
    console.log(`handleChange called => name ${name}, value: ${value}`);
    const { user } = this.state;
    this.setState({
      user: {
        ...user,
        [name]: value
      }
    });
  }

  handleSubmit(user) {
    console.log("handleSubmit state", this.state);
    this.setState({ submitted: true });
    const { user } = this.state;
    console.log("user", user);
    const { dispatch } = this.props;
    dispatch(userActions.register(user));
  }

  render() {
    return (
      <div className="col-md-6 col-md-offset-3">
        <h2>Register</h2>
        <Form model="user" onSubmit={(user) => this.handleSubmit(user)} >
          <div className="form-group">
            <label htmlFor="firstName">First Name</label>
            <Control.text
              id="firstName"
              className="form-control"
              model=".firstName"
              onChange={this.handleChange}
              validators={{ required: isRequired, maxLength: maxLength(50) }}
              validateOn="blur"
            />
            <Errors
              model=".firstName"
              className="errors text-danger"
              show="touched"
              messages={{
                required: 'Please provide First Name.',
                maxLength: 'Maximum length can be 50 characters.'
              }}
            />
          </div>
          <div className="form-group">
            <label htmlFor="lastName">Last Name</label>
            <Control.text className="form-control" model=".lastName" onChange={this.handleChange} />
          </div>
          <div className="form-group">
            <label htmlFor="username">Username</label>
            <Control.text className="form-control" model=".username" onChange={this.handleChange} />
          </div>
          <div className="form-group">
            <label htmlFor="firstName">Email Address</label>
            <Control.text className="form-control" model=".email" onChange={this.handleChange} />
          </div>
          <div className="form-group">
            <label htmlFor="password">Password</label>
            <Control type="password" className="form-control" model=".password" onChange={this.handleChange} />
          </div>
          <div className="form-group">
            <label htmlFor="confirmPassword">Confirm Password</label>
            <Control type="password" id="confirmPassword" className="form-control" model=".confirmPassword" onChange={this.handleChange} />
          </div>
          <div className="form-group">
            <button type="submit" className="btn btn-primary" >Register</button>
          </div>
        </Form>
      </div>
    );
  }
}

const connectedRegisterPage = connect()(RegisterPage);
export { connectedRegisterPage as RegisterPage };

类注册表页扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
用户：{
名字：''，
姓氏：“”，
用户名：“”，
电子邮件：“”，
密码：“”，
确认密码：“”
},
提交：假
};
this.handleChange=this.handleChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
手变（活动）{
常量{name，value}=event.target；
log（`handleChange called=>name${name}，value:${value}`）；
const{user}=this.state；
这是我的国家({
用户：{
…用户，
[名称]：值
}
});
}
handleSubmit（用户）{
log（“handlesubmitstate”，this.state）；
this.setState（{submitted:true}）；
const{user}=this.state；
console.log（“用户”，user）；
const{dispatch}=this.props；
分派（userActions.register（user））；
}
render（）{
返回(
登记
this.handleSubmit（用户）}>
名字
姓
用户名
电子邮件地址
密码
确认密码
登记
);
}
}
const connectedRegisterPage=connect（）（注册表页）；
导出{connectedRegisterPage as RegisterPage}；

当我点击submit按钮时，状态变为“USER\u REGISTER\u REQUEST”状态，但它在用户数据中添加了如下附加属性

user: {
confirmPassword : ""
email: ""
firstName: ""
lastName: ""
password: ""
user.firstName: "foo" << added extra property
username: ""

用户：{
确认密码：“
电子邮件：“
名字：“
姓氏：“
密码：“
user.firstName:“foo”最好的方法是遵循这些库的文档。它们都有关于如何创建表单的清晰而简单的演示



我对两者都有经验，我个人选择了
react-redux表单
，因为它具有灵活性


虽然要回答你的问题——

不，您根本不需要使用
this.state
来处理表单，因为它都是在redux状态中处理的
要禁用表单组件，请阅读。这是使用禁用的
属性的
控件上的文档

不要担心
模糊
和
聚焦
。这些不会影响您的性能
您已经在组件的模型中定义了
user.firstName
。请阅读模型页面
如上所述，我建议
react redux表单
首先，我使用redux。。
最简单的方法是设置disable={invalid}

提交

如果您
console.log（props）；

您将发现许多密钥，例如无效、有效、原始、提交、提交

它们中的大多数都有布尔值true和false，并且随着对表单执行操作而改变

当我的表格无效时，无效将为真

但当字段被填充时，无效变量将为false

给你

constsyncvalidationform=（道具）=>{
const{handleSubmit，pristite，reset，submiting，invalid}=props；
console.log（道具）；

将无效设置为道具以使用它

然后只需添加disable={invalid}

但我有一个更好的简单解决方案：
这样做：

disabled=“{！this.state.user.lastName | | |！this.state.username.email | |！this.state.user.password}

这将一直返回true，直到所有字段都被填充为止

user: {
confirmPassword : ""
email: ""
firstName: ""
lastName: ""
password: ""
user.firstName: "foo" << added extra property
username: ""