Reactjs 原始函数不工作，重复形式

我开始使用redux表单和react引导。我已经在我的表单中进行了验证，我的自定义验证工作正常，但我提供了原始条件，因为它不适合我。下面是我的代码，让我知道我哪里出错了？我需要补充什么吗？ 如果有人告诉我渲染场对我有什么作用

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);

const renderField=({
输入，
标签，
类型，
meta:{触摸，错误，警告}
}) => (
{label}
{感动&&
（（错误&&{error}）||
（警告&&{warning}）
);
类重复扩展了React.Component{
构造函数（…参数）{
超级（…args）；
此.state={
开：错，
showModal:错误
};
}
saveDuplicate=value=>{
如果（“[默认]”.includes（value.duplicateName））{
抛出新提交错误({
duplicateName:'用户不存在'，
_错误：“登录失败！”
});
}
console.log（'提交时的值'，值）；
};
close=（）=>this.setState（{showmodel:false}）；
openModal=（）=>this.setState（{showModal:true}）；
render（）{
console.log（'this props一式两份'，this.props）；
const required=value=>（值？未定义：“required”）；
const{handleSubmit，pristine，reset，submiting}=this.props；
返回(
复制品
拯救
取消
);
}
}
导出默认reduxForm({
表单：“复制表单”//此表单的唯一标识符
})（副本）；

您能证明什么东西在原始状态下不起作用，以及您希望它如何起作用吗。我在这里放了一个沙箱，你的代码看起来很好。。。