React ref 在材料 ui 的自定义输入中给出 undefine

Question

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

自定义输入

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 编辑器中，它似乎工作正常。 当我按下回车键（提交表单）时，我会在控制台中收到电子邮件。如果电子邮件有效。

你能看看，也许更好地向我们解释一下问题是什么？可能我没听懂你在说什么。

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