Question

我正在做反应，我提供自定义输入。通过提供myRef作为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元素。对于来自Input的自定义react-ui-next，您应该使用inputRef。

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

1 个答案: