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

我需要使用父组件中子组件内部的状态值

组成部分：

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

导出默认函数子项（道具）{
const[data，setData]=useState（“”）
常数handleChange=（e）=>{
e、 预防默认值（）；
setData（{[e.target.name]：e.target.value}）；
}
返回(
);
};

这是父组件：

export default function Parent(){

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

导出默认函数父函数（）{
返回(
);}

您只能在父组件中使用

状态

和

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>
);}

导出默认函数拆分器（）{
const[data，setData]=useState（“”）
常量handleChange=（名称、值）=>{
setData（{[name]：value}）；
}
返回(
//将更改处理程序传递到此处
);}

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

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

导出默认功能文本区域（props）{
常数handleChange=（e）=>{
props.handleChange（e.target.name，e.target.value）
}
返回(
);
};

你看起来像这样吗

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>
  );
};

从“React”导入React；
导入“/styles.css”；
常量Comp1=（）=>组件一；
常量Comp2=（）=>组件二；
常数Comp3=（）=>成分三；
导出默认功能文本区域（道具）{
const[data，setData]=React.useState（“”）；
常量handleChange=e=>{
e、 预防默认值（）；
设置数据（如目标值）；
};
控制台日志（数据）；
返回(
请选择以显示组件
{data==“一”&&}
{data==“两个”&&}
{data==“三”&&}
);
}
const CssTextArea=（{onChange}）=>{
设arr=[“一”、“二”、“三”]；
返回(
挑选
{arr.map（a=>(
{a}
))}
);
};

---

Live

完全不清楚，您的确切要求是什么？我只需要读取父组件中子组件的状态component@Vinicius你的问题需要进一步澄清。请编辑你的帖子并放更多的信息听起来像是重复的：基本上，把回调作为道具传递给孩子。我同意@ravibagul91。