Javascript 物料ui自定义输入中的重复表单不工作

我在材料界面中工作，并在有自定义输入的地方作出反应。我正在使用redux表单验证表单。@Redux form/INITIALIZE和@Redux form/REGISTER\u字段的Redux form成功，但是onBlur、onFocus事件未被调度。若我将字段的组件更改为类似于

的内容，它将工作，但在React Material UI自定义输入中不工作

自定义输入：

class CustomInput extends React.Component {
  render() {
      const { classes, formControlProps, label, id, labelProps,inputRef, inputProps, error, success,meta} = this.props;
      return (
        <FormControl {...formControlProps} className={classes.formControl}>
            {label !== undefined ? (<InputLabel
                classes={{
                    root: classes.labelRoot + (error ? " " + classes.labelRootError:success ? " " + classes.labelRootSuccess:""),
                }}
                htmlFor={id}
                {...labelProps}
            >
                {label}
            </InputLabel>):null}
            <Input
                classes={{
                    root: (label !== undefined ? "":classes.marginTop),
                    disabled: classes.disabled,
                    underline: classes.underline,
                    inkbar: (error ? classes.inkbarError:success ? classes.inkbarSuccess:classes.inkbar),
                }}
                id={id}
                inputRef={inputRef}
                {...inputProps}
            />
            {error ? <Clear className={classes.feedback + " " + classes.labelRootError}/>:success ? <Check className={classes.feedback + " " + classes.labelRootSuccess}/>:null}
        </FormControl>
    );
  }
}

CustomInput.propTypes = {
    classes: PropTypes.object.isRequired,
    labelText: PropTypes.node,
    labelProps: PropTypes.object,
    id: PropTypes.string,
    inputProps: PropTypes.object,
    formControlProps: PropTypes.object,
    meta:PropTypes.object,
    error: PropTypes.bool,
    success: PropTypes.bool
}

export default withStyles(customInputStyle)(CustomInput);

类CustomInput扩展React.Component{
render（）{
const{classes，formControlProps，label，id，labelProps，inputRef，inputProps，error，success，meta}=this.props；
返回(
{标签！==未定义(
{label}
)：null}
{错误？：成功？：空}
);
}
}
CustomInput.propTypes={
类：PropTypes.object.isRequired，
labelText:PropTypes.node，
labelProps:PropTypes.object，
id:PropTypes.string，
inputProps:PropTypes.object，
formControlProps:PropTypes.object，
meta:PropTypes.object，
错误：PropTypes.bool，
成功：PropTypes.bool
}
使用样式导出默认值（customInputStyle）（CustomInput）；

添加用户表单：

const required = value => (value == null ? 'Required' : undefined)
class AddUser extends React.Component {

    handleSubmit(event){
        event.preventDefault();
        console.log("Hello")
    }

    render(){
        return (
            <div>
                <form onSubmit={this.handleSubmit.bind(this)}>
                 <Field
                    name="email"
                    component={CustomInput}
                    label="Email"  validate={required} formControlProps=
                    {{fullWidth:true}}  
                  />
               </form>
          </div>)
       }
   }

export default reduxForm({
    form: 'add-user-form',
    initialValues: {
        email: ''
    },
})(AddUser);

const required=value=>（value==null？'required'：未定义）
类AddUser扩展了React.Component{
handleSubmit（事件）{
event.preventDefault（）；
log（“你好”）
}
render（）{
返回(
)
}
}
导出默认reduxForm({
表单：“添加用户表单”，
初始值：{
电子邮件：“”
},
})（AddUser）；

字段为您提供一个

输入

道具，其中包含您需要传递到输入字段的所有属性。大概是这样的：

class CustomInput extends React.Component {
  render() {
      const { input, classes, formControlProps, label, id, labelProps,inputRef, inputProps, error, success,meta} = this.props;
      return (
        <FormControl {...formControlProps} className={classes.formControl}>
            {label !== undefined ? (<InputLabel
                classes={{
                    root: classes.labelRoot + (error ? " " + classes.labelRootError:success ? " " + classes.labelRootSuccess:""),
                }}
                htmlFor={id}
                {...labelProps}
            >
                {label}
            </InputLabel>):null}
            <Input
                classes={{
                    root: (label !== undefined ? "":classes.marginTop),
                    disabled: classes.disabled,
                    underline: classes.underline,
                    inkbar: (error ? classes.inkbarError:success ? classes.inkbarSuccess:classes.inkbar),
                }}
                id={id}
                inputProps={{...input}}
                inputRef={inputRef}
                {...inputProps}
            />
            {error ? <Clear className={classes.feedback + " " + classes.labelRootError}/>:success ? <Check className={classes.feedback + " " + classes.labelRootSuccess}/>:null}
        </FormControl>
    );
  }
}

类CustomInput扩展React.Component{
render（）{
const{input，class，formControlProps，label，id，labelProps，inputRef，inputProps，error，success，meta}=this.props；
返回(
{标签！==未定义(
{label}
)：null}
{错误？：成功？：空}
);
}
}

它可以工作，但即使在文本插入后占位符仍然保留，只是为了确保请将其更改为：

inputRef={inputRef}{…inputProps}inputProps={{…inputProps}/>

inputRef用于react的ref。在像

value={input？input.value:null}

这样的自定义输入中添加值后，它可以正常工作。谢谢你的帮助，先生。