javascript - 将文本字段输入从子组件传递给父组件

Question

我正在创建一个简单的应用程序来进一步测试我对 React 和 Node.js 的了解。目前，我有一个包含属于子组件 (FormText.js) 的文本字段的应用程序；但是，我希望将用户在这些文本字段中输入的信息传输到父组件 (DummyForm.js) 以放入状态对象中。这必须在 DummyForm.js 文件中完成，因为我有其他类似的组件需要使用它们来执行此操作，这些组件将全部路由回 DummyForm.js，因此我可以使用 Node.js 将这个有状态对象上传到 MongoDB。我不太清楚该怎么做。下面是我正在使用的一些 React 代码:

DummyForm.js

import React, { useState } from "react";
import ReactDOM from "react-dom";
import FormText from "./FormText";

const DummyForm = () => {
//I want the information from each of my child component to go in each 'textField' property respectively
    const [textFields, setTextFields] = useState({
        textField1: "",
        textField2: "",
        textField3: "",
        textField4: "",
    });

    return (
        <div>
          <div>
            <FormText text='Placeholder1'/>
            <FormText text='Placeholder2' />
            <FormText text='Placeholder3' />
            <FormText text='Placeholder4' />
          </div>
        </div>
    );
};

let renderedForm = () => {
    ReactDOM.render(<DummyForm />, document.getElementById("root"));
};

export { renderedForm };

FormText.js

import React, { useState } from "react";
import { makeStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";

const useStyles = makeStyles({
    boxWrapper: {
        padding: "20px 0 10px 0",
    },
});

const FormText = (props) => {

    const classes = useStyles();

    const handleChange = (e) => {
        console.log(e.target.value);
    };
    return (
        <div className={classes.boxWrapper}>
            <TextField
                id='outlined-textarea'
                label={props.text}
                multiline
                variant='outlined'
                fullWidth
                color='secondary'
                onChange={handleChange}
            />
        </div>
    );
};

export default FormText;

我很感激能得到的任何帮助。谢谢

Answer 1

这里你想要的是一个Controlled Component .以您的代码为例:

DummyForm.js

import React, { useState } from "react";
import ReactDOM from "react-dom";
import FormText from "./FormText";

const DummyForm = () => {
  //I want the information from each of my child component to go in each 'textField' property respectively
  const [textFields, setTextFields] = useState({
    textField1: "",
    textField2: "",
    textField3: "",
    textField4: "",
  });

  const handleTextChange = (e) =>
    setTextFields({
      ...textFields,
      [e.currentTarget.name]: e.currentTarget.value,
    });

  return (
    <div>
      <div>
        <FormText
          text="Placeholder1"
          name="textField1"
          onChange={handleTextChange}
        />
        <FormText
          text="Placeholder2"
          name="textField2"
          onChange={handleTextChange}
        />
        <FormText
          text="Placeholder3"
          name="textField3"
          onChange={handleTextChange}
        />
        <FormText
          text="Placeholder4"
          name="textField4"
          onChange={handleTextChange}
        />
      </div>
    </div>
  );
};

let renderedForm = () => {
  ReactDOM.render(<DummyForm />, document.getElementById("root"));
};

export { renderedForm };

FormText.js

import React, { useState } from "react";
import { makeStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";

const useStyles = makeStyles({
  boxWrapper: {
    padding: "20px 0 10px 0",
  },
});

const FormText = (props) => {
  const classes = useStyles();

  return (
    <div className={classes.boxWrapper}>
      <TextField
        id="outlined-textarea"
        label={props.text}
        multiline
        variant="outlined"
        fullWidth
        color="secondary"
        onChange={this.props.onChange}
        name={this.props.name}
      />
    </div>
  );
};

export default FormText;