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

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;

Answer 2

请检查这个例子：

DummyForm 组件

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: "",
    });

    function onChange(name, value) {
        console.log(name, value);
        setTextFields({...textFields, [name]: value });
    }

    return (
        <div>
            <div>
                <FormText name='textField1' text='Placeholder1' onChange={onChange}/>
                <FormText name='textField2' text='Placeholder2' onChange={onChange}/>
                <FormText name='textField3' text='Placeholder3' onChange={onChange}/>
                <FormText name='textField4' text='Placeholder4' onChange={onChange}/>
            </div>
            <button onClick={() => {console.log(textFields, 'textFields')}}> Show textFields on Console</button>
        </div>
    );
};

export default DummyForm;

FormText 组件

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);
        props.onChange(e.target.name, e.target.value);
    };
    return (
        <div className={classes.boxWrapper}>
            <TextField
                id='outlined-textarea'
                label={props.text}
                name={props.name}
                multiline
                variant='outlined'
                fullWidth
                color='secondary'
                onChange={handleChange}
            />
        </div>
    );
};

export default FormText;