我开始使用redux-form和react-bootstrap。我已经在我的表单中进行了验证,我的自定义验证工作正常,但我已经从this doc给出了原始条件,它对我不起作用。下面是我的代码,让我知道我哪里出错了?我需要添加任何东西吗? 如果有人让我知道渲染字段对我有什么影响吗?
const renderField = ({
input,
label,
type,
meta: { touched, error, warning }
}) => (
<div>
<label>{label}</label>
<div>
<input {...input} placeholder={label} type={type} />
{touched &&
((error && <span>{error}</span>) ||
(warning && <span>{warning}</span>))}
</div>
</div>
);
class Duplicate extends React.Component {
constructor(...args) {
super(...args);
this.state = {
open: false,
showModal: false
};
}
saveDuplicate = value => {
if ('[default]'.includes(value.duplicateName)) {
throw new SubmissionError({
duplicateName: 'User does not exist',
_error: 'Login failed!'
});
}
console.log('value on submit', value);
};
close = () => this.setState({ showModal: false });
openModal = () => this.setState({ showModal: true });
render() {
console.log('this props in duplicate', this.props);
const required = value => (value ? undefined : 'Required');
const { handleSubmit, pristine, reset, submitting } = this.props;
return (
<div className="scenario_btn">
<Button
onClick={this.openModal}
bsStyle="danger"
className="scenario_mangt"
>
Duplicate
</Button>
<Modal
aria-labelledby="modal-label"
show={this.state.showModal}
onHide={this.close}
>
<form onSubmit={handleSubmit(this.saveDuplicate)}>
<Field
name="duplicateName"
type="text"
component={renderField}
label="name"
validate={[required]}
/>
<div>
<button type="submit" disabled={submitting}>
Save
</button>
<button
type="button"
disabled={pristine || submitting}
onClick={reset}
>
Cancel
</button>
</div>
</form>
</Modal>
</div>
);
}
}
export default reduxForm({
form: 'duplicatForm' // a unique identifier for this form
})(Duplicate);