javascript - React ref 在 Material ui 的自定义输入中给出了未定义

Question

我正在react中工作，我提供了自定义输入。自定义输入通过提供myRef作为react ref的 Prop 在某些组件中使用。然而，所有过程都很好，但它在控制台中显示值未定义。

自定义输入

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

在其他组件中使用自定义输入

handleSubmit(event) {
            event.preventDefault();
            console.log(this.email.value); //show undefined in console
        }
    <form onSubmit={this.handleSubmit.bind(this)}>
        <CustomInput
            labelText="Email"
            id="email"
            inputRef={(input) => {this.email = input}} // provided inputRef Prop
            formControlProps={{
                fullWidth: true
            }}
            inputProps ={{
                type:"email",
            }}
        />
        </ItemGrid>
     </form>

Answer 1

我将您的代码放入 CodeSandbox 编辑器中，它似乎工作正常。 当我按 Enter 键(提交表单)时，我会在控制台中记录电子邮件。如果电子邮件有效。

您能看一下并更好地向我们解释一下问题是什么吗？也许我没完全理解你在说什么。

LE:ref 适用于 native input 元素。对于来自 react-ui-next 的自定义 Input，您应该使用 inputRef。