React Ref未獲取表單中的文本輸入字段數據

Question

我在自定義輸入字段中使用react Ref，但未獲取輸入內容。

我正在React類組件中創建一些引用，並在表單自定義輸入字段引用中使用它們。 然后我有一個具有“ 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>
  );
}

Answer 1

從官方文檔 ：

在典型的React數據流中，道具是父組件與其子組件交互的唯一方式。 要修改孩子，您可以使用新道具重新渲染它。

您的第一個傾向可能是使用引用在應用程序中“使事情成真”。 如果是這種情況，請花點時間仔細考慮一下在組件層次結構中應在何處擁有狀態。 通常，很明顯，“擁有”該狀態的適當位置在層次結構中處於較高級別。 有關此示例，請參見“ 提升狀態向上”指南。

當前，您確實在做您不應該做的事情：使用引用訪問組件方法。 那是一種反模式 ，使您的代碼容易受到您當前遇到的錯誤的影響 。 您應該：

• 如果需要將數據從一個組件傳遞到另一個組件，請提升狀態
• 如果您需要觸發操作，請使用Redux之類的狀態容器庫

無論哪種方式，我都強烈建議您在任一方向上重構代碼。