材料ui的自定义输入中的Redux表单不起作用

Posted 2023-02-22

【中文标题】材料ui的自定义输入中的Redux表单不起作用

【英文标题】：Redux form in custom input of material ui not working

【发布时间】：2018-07-21 16:08:25

【问题描述】：

我在材料 ui 中工作，并在我有自定义输入的地方做出反应。我正在使用 redux 表单来验证表单。 @redux-form/INITIALIZE 和 @redux-form/REGISTER_FIELD 的 Redux 表单成功，但是 onBlur、onFocus 事件没有调度。如果我将 Field 的组件更改为 <Field name="email" component="input" /> 之类的东西，它会起作用，但它在 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);

添加用户表单：

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

【参考方案1】：

Field 为您提供了一个 input 属性，其中包含您需要传递到输入字段的所有属性。像这样的：

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

【讨论】：

它可以工作，但即使在文本插入后占位符仍然存在

为了确定请将其更改为：inputRef=inputRef ...inputProps inputProps=...input />

inputRef 用于反应的参考。在 value=input?input.value:null 等自定义输入中添加值后，它工作正常。感谢您的友好帮助先生。