我正在使用 redux-form 渲染下面的简单表单,并且运行良好。现在,我想在另一种情况下禁用提交按钮:如果 Field
中的任何一个有错误(即设置了 meta.error
)。
从查看文档来看,我认为周围的 <form>
是不可能的知道是否是 <Field>
组件有错误。也许有人有一个想法,如何像使用 disabled={hasErrors || submitting || pristine}
一样简单地解决它
const EditBlogEntryForm = ({ onSubmit, reset, handleSubmit,
pristine, submitting, ...rest }) => {
console.log('rest: ', rest);
return (
<form onSubmit={handleSubmit(onSubmit)}>
<div className="form-group">
<Field name="title"
type="text"
component={renderField}
label="Titel"
className="form-control"
placeholder="Titel eingeben..." />
</div>
<div className="form-group">
<Field name="text"
component={renderTextArea}
label="Text"
className="form-control"
placeholder="Textinhalt eingeben..." />
</div>
<div className="form-group">
<Field name="image"
type="text"
component={renderField}
label="Bild-URL:"
className="form-control"
placeholder="Bildadresse eingeben..." />
</div>
<div>
<button type="submit" className="btn btn-default"
disabled={submitting || pristine}>
Blogeintrag speichern
</button>
<button type="button" className="btn btn-default"
disabled={pristine || submitting}
onClick={reset}>
Formular leeren
</button>
</div>
</form>
);
};
最佳答案
不要滥用你只需要使用 this.props 的状态 对于每个 setState 组件,将再渲染一次
const {invalid} = this.props
return(
<button type="submit" className="btn btn-default"
disabled={invalid|| submitting || pristine}>
Blogeintrag speichern
</button>)
更多文档: https://redux-form.com/6.0.0-alpha.4/docs/api/props.md/
关于reactjs - redux-form:如果至少一个字段无效,如何禁用提交按钮?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43768535/