如何在父组件中使用子组件的状态？答案

【问题标题】：How to use the state of the child component in the parent component?如何在父组件中使用子组件的状态？
【发布时间】：2020-04-29 19:38:00
【问题描述】：

我需要在父组件的子组件中使用状态值。

组件：

export default function Children(props) {

    const [data,setData] = useState('')

     const handleChange = (e) =>{
        e.preventDefault();
        setData({[e.target.name]:e.target.value});

     }
    return(
        <Component onChange={handleChange} name={props.name} label={props.name} variant="outlined" />
    );
};

这是父组件：

export default function Parent(){

    return(
        <div>
        <TextArea name="One"/>
        <TextArea name="Two"/>
        <TextArea name="Three"/>
        </div>
);}

【问题讨论】：

完全不清楚，您的具体要求是什么？
我只需要在父组件中读取子组件的状态
@Vinicius 您的问题需要进一步澄清。请编辑您的帖子并提供更多信息
听起来像重复：stackoverflow.com/a/27875018/8333026 基本上，将回调作为道具传递给孩子。

标签： javascript reactjs

【解决方案1】：

你看起来像这样吗？

import React from "react";
import "./styles.css";

const Comp1 = () => <h2>Component One</h2>;
const Comp2 = () => <h2>Component Two</h2>;
const Comp3 = () => <h2>Component Three</h2>;

export default function TextArea(props) {
  const [data, setData] = React.useState("");

  const handleChange = e => {
    e.preventDefault();
    setData(e.target.value);
  };
  console.log(data);
  return (
    <>
      <h3>Please select to show Component</h3>
      <CssTextArea
        onChange={handleChange}
        name={props.name}
        label={props.name}
        variant="outlined"
      />
      {data === "One" && <Comp1 />}
      {data === "Two" && <Comp2 />}
      {data === "Three" && <Comp3 />}
    </>
  );
}
const CssTextArea = ({ onChange }) => {
  let arr = ["One", "Two", "Three"];
  return (
    <select onChange={onChange}>
      <option value="">Select</option>
      {arr.map(a => (
        <option value={a} key={a}>
          {a}
        </option>
      ))}
    </select>
  );
};

直播Demo

【讨论】：

【解决方案2】：

您只能在父组件中拥有state 和onChange 处理程序。

export default function Splitter(){
    const [data,setData] = useState('')

    const handleChange = (name, value) =>{
        setData({[name]:value});
     }
    return(
        <div>
        <TextArea name="Nome" handleChange={handleChange}/> //Pass the change handler here
        <TextArea name="Test" handleChange={handleChange}/>
        <TextArea name="Local" handleChange={handleChange}/>
        </div>
);}

在子组件中调用父组件的函数，

export default function TextArea(props) {

     const handleChange = (e) =>{
        props.handleChange(e.target.name, e.target.value)
     }

    return(
        <CssTextArea onChange={handleChange} name={props.name} label={props.name} variant="outlined" />
    );
};

【讨论】：

我同意@ravibagul91。