javascript - React Ref没有在表单中获取文本输入字段数据

问题描述

我在自定义输入字段中使用 react Ref，但它没有获取输入内容。

我在 React 类组件中创建了一些 ref 并在表单自定义输入字段 refs 中使用它们。然后我在表单中有一个按钮，它具有“onClick”事件来获取该数据。当我得到“ref.current.value”时，我总是在控制台中不确定

class LandingAfterSignIn extends React.Component {

    titleTextFieldRef = React.createRef();
    shortDescriptionMetaTextFieldRef = React.createRef();
    longDescriptionMetaTextFieldRef = React.createRef();
    imageFieldRef = React.

createRef();
    webFieldRef = React.createRef();
    contactTextFieldRef = React.createRef();

constructor(props) {
    super(props);
    // we use this to make the card to appear after the page has been rendered
    this.state = {
        cardAnimaton: "cardHidden",
        isLoading: false,
        error: null
    };

   // super(props);




    this.state = {
        errors: []
    };

}



render() {
    let image= require("assets/img/landing-bg.jpg") ;
    const { classes, ...rest } = this.props;

    //let titleTextFieldRef= this.titleTextFieldRef  ;
    //let  shortDescriptionMetaTextFieldRef  = this.shortDescriptionMetaTextFieldRef ;

    return (
        <div
            className={classes.pageHeader}
            style={{
                backgroundImage: "url(" + image + ")",
                backgroundSize: "cover",
                backgroundPosition: "top center",
                width: "100%"
            }}
        >
            <Header
                color="transparent"
                routes={dashboardRoutes}
                brand="StockNap"
                rightLinks={<HeaderLinks />}
                fixed
                changeColorOnScroll={{
                    height: 400,
                    color: "white"
                }}
                {...rest}
            />
            <div>
                <div className={classes.container}>

                    <div className={classes.container}>
                        <GridContainer>
                            <GridItem xs={12} sm={12} md={6}>

                                <h1 className={classes.title}>Welcome {firebase.auth().currentUser.displayName} </h1>
                                <FirebaseDatabaseMutation type="push" path="user_bookmarks">
                                    {({ runMutation }) => (
                                        <form>


                                            <GridContainer>
                                                    <GridItem xs={12} sm={12} md={6}>
                                                        <CustomInput
                                                            labelText="Company Name/Title"
                                                            id="titleTextField"
                                                            formControlProps={{
                                                                fullWidth: true
                                                            }}
                                                            inputRef={this.titleTextFieldRef}
                                                            >
                                                        </CustomInput>
                                                    </GridItem>
                                                    <GridItem xs={12} sm={12} md={6}>
                                                        <CustomInput
                                                            labelText="short Description"
                                                            id="shortDescription"
                                                            formControlProps={{
                                                                fullWidth: true,
                                                                className: classes.textArea
                                                            }}
                                                            inputRef={this.shortDescriptionMetaTextFieldRef}
                                                        />
                                                    </GridItem>
                                                    <GridItem xs={12} sm={12} md={6}>
                                                        <CustomInput
                                                            labelText="long Description"
                                                            id="longDescription"
                                                            formControlProps={{
                                                                fullWidth: true,
                                                                className: classes.textArea
                                                            }}
                                                            inputProps={{
                                                                multiline: true,
                                                                rows: 2
                                                            }}
                                                            inputRef={this.longDescriptionMetaTextFieldRef}
                                                        />
                                                    </GridItem>
                                                <GridItem xs={12} sm={12} md={6}>
                                                    <CustomInput
                                                        labelText="contact"
                                                        id="contactTextField"
                                                        formControlProps={{
                                                            fullWidth: true,

                                                        }}

                                                        inputRef={this.contactTextFieldRef}
                                                    />
                                                </GridItem>

                                                    <Button
                                                        style={{
                                                            width: 50,
                                                            height: 50,
                                                            alignSelf: "center",
                                                            background: "#039BE5",
                                                            color: "white"
                                                        }}
                                                        variant="fab"
                                                        type="submit"
                                                        onClick={async ev => {
                                                            console.log("submit") ;
                                                            ev.preventDefault();
                                                            ev.stopPropagation();
                                                            ev.nativeEvent.stopImmediatePropagation();


                                                            const titleTextField = get(
                                                                this.titleTextFieldRef,
                                                                "current.value",
                                                                ""
                                                            );
                                                            const shortDescriptionMetaTextField = get(
                                                                this.shortDescriptionMetaTextFieldRef,
                                                                "current.value",
                                                                ""
                                                            );
                                                            const longDescriptionkMetaTextField = get(
                                                                this.longDescriptionMetaTextFieldRef,
                                                                "current.value",
                                                                ""
                                                            );
                                                            const contactTextField = get(
                                                                this.contactTextFieldRef,
                                                                "current.value",
                                                                ""
                                                            );

                                                            console.log(this.titleTextFieldRef);
                                                            console.log(this.shortDescriptionMetaTextFieldRef);

                                                            await runMutation({
                                                                titleTextField: titleTextField,
                                                                shortDescriptionMetaTextField: shortDescriptionMetaTextField,
                                                                created_at: firebase.database.ServerValue.TIMESTAMP,
                                                                updated_at: firebase.database.ServerValue.TIMESTAMP
                                                            });


                                                            set(this.titleTextFieldRef, "current.value", "");
                                                           set(this.shortDescriptionMetaTextFieldRef, "current.value", "");
                                                        }}
                                                    >
                                                        +
                                                    </Button>

                                                </GridContainer>

                                        </form>
                                    )}
                                </FirebaseDatabaseMutation>

                            </GridItem>
                        </GridContainer>
                    </div>
                </div>
            </div>
            <div className={classNames(classes.main, classes.mainRaised)}>
                <div className={classes.container}>

                </div>
            </div>
            <br/>
            <Footer />
        </div>
    );
}

}

我想添加更多信息，customInput 是我希望父母参考的功能组件

function CustomInput({ ...props }) {
  const {
    classes,
    formControlProps,
    labelText,
    id,
    labelProps,
    inputProps,
    error,
    white,
    inputRootCustomClasses,
    success
  } = props;

  const labelClasses = classNames({
    [" " + classes.labelRootError]: error,
    [" " + classes.labelRootSuccess]: success && !error
  });
  const underlineClasses = classNames({
    [classes.underlineError]: error,
    [classes.underlineSuccess]: success && !error,
    [classes.underline]: true,
    [classes.whiteUnderline]: white
  });
  const marginTop = classNames({
    [inputRootCustomClasses]: inputRootCustomClasses !== undefined
  });
  const inputClasses = classNames({
    [classes.input]: true,
    [classes.whiteInput]: white
  });
  var formControlClasses;
  if (formControlProps !== undefined) {
    formControlClasses = classNames(
      formControlProps.className,
      classes.formControl
    );
  } else {
    formControlClasses = classes.formControl;
  }
  return (
    <FormControl {...formControlProps} className={formControlClasses}>
      {labelText !== undefined ? (
        <InputLabel
          className={classes.labelRoot + " " + labelClasses}
          htmlFor={id}
          {...labelProps}
        >
          {labelText}
        </InputLabel>
      ) : null}
      <Input
        classes={{
          input: inputClasses,
          root: marginTop,
          disabled: classes.disabled,
          underline: underlineClasses
        }}
        id={id}
        {...inputProps}
      />
    </FormControl>
  );
}

标签： javascriptreactjsreact-redux

javascript - React Ref没有在表单中获取文本输入字段数据

问题描述

解决方案

推荐阅读