在 react-redux-form 中，如何禁用提交按钮，直到所有必填字段都未填写

Question

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

1. 冗余表单
2. 反应-重复形式

首先，不确定需要使用哪个，因此尝试了后面的步骤

请在此处查看演示

1)在减速机中使用createForms()combineReducers.js

const initialUserState = {
firstName: '',
lastName: '',
userName: '',
email: '',
password: '',
confirmPassword: ''
};
const rootReducer = combineReducers({
...createForms({
user: initialUserState
})
});

2)在注册页面中.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 };

当我单击提交按钮时，状态更改为"USER_REGISTER_REQUEST">状态，但它在用户数据中添加了附加属性，如下所示

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

所以我的集体查询是(请允许我在一篇文章中提出类似的问题，请您不要投反对票，它们都是密切相关的)

1. 为什么我们需要在 RegisterPageconstructor()中再次定义this.state = { user : {} }当我们已经在combineReducer中定义为initialUserState. 我不完全明白这一点，请帮助我。

2. 如何禁用提交按钮，直到所有必填字段都未填写？ 从角度背景调用，我们使用ng-pristine、ng-touched、ng-valid和许多其他指令来检查表单字段并在禁用提交按钮ng-disabled编写表达式。

那么类似的功能可以在 React 中实现吗？

3. 还在控制台中检查了每次焦点/模糊状态都被称为不必要的(type: "rrf/focus")。如何防止它们，或者这是正常的反应行为，一般不会影响我们的页面？

4. 为什么在提交时在用户对象中添加其他数据？

5. 从上面看哪个库更人性化？

Answer 1

首先我使用 redux。 最简单的方法是设置禁用 = {无效}。

<Button type="submit" disabled={invalid}>Submit</Button>

在道具中，如果你console.log(props);

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

它们中的大多数都有布尔值 true 和 false，它会随着您在窗体上执行操作而变化。

当我的表单无效(无效)时，无效将为真。

但是当字段被填充时，无效变量将为假。

在这里你使用它。

const SyncValidationForm = (props) => { const {handleSubmit, pristine, reset, submitting, invalid} = props; console.log(props);

设置为无效的道具以使用它。

然后只需添加禁用 = {无效}

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

disabled="{!this.state.user.lastName || !this.state.username.email || !this.state.user.password}

这将不断返回 true，直到所有字段都填满

Answer 2

最好的办法是遵循这些库的文档。两者都有关于如何创建表单的清晰易懂的演示。

Redux 表单文档

React Redux Form docs

我两者都有经验，我个人选择react-redux-form因为它的灵活性。

---

虽然要回答你的问题——

1. 不，您根本不需要使用this.state来处理表单，因为它都是在 redux 状态中处理的。
2. 要禁用表单组件，请阅读此内容。这是使用disabled道具Control组件上的文档
3. 不用担心blur和focus.这些不会影响您的表现
4. 您已在组件的模型中定义了user.firstName。请阅读此页面有关模型的信息。
5. 如上所述，我建议react-redux-form