Question

我的主要组成部分如下。

const MainApp: React.FC = () => {

  return (
      <div>
        <DummyComp/>    
        <ComponentA />
        <ComponentB />
      </div>
  );
}

export default App;

“组件B”具有一些表单元素，当其值更改时，我要求将所有表单值都传递给“组件A”。

我发现的所有示例均未使用功能组件。因此，我不确定如何在功能组件中创建回调函数和使用状态。

Answer 1

const MainApp: React.FC = () => {

 const [formData, setFormData ] = useState({});



  return (
      <div>
        <DummyComp/>    
        <ComponentA formData={formData} />
        <ComponentB onClick={setFormData} />
      </div>
  );
}

export default App;

您可以使用setFormData方法在ComponentB中根据需要编辑formData对象，并且可以在ComponentA中读取formData对象。

Answer 2

您可以使用Redux（全局状态）来执行此操作，也可以在主组件中使用状态管理。

const MainApp: React.FC = () => {

 const [data, setData] = useState();

 useEffect(() => {
   setData() //anyhting initial
  },[formdata]);

    const handleData = (data) => {
     setData(data)
    }


  return (
      <div>
        <DummyComp/>    
        <ComponentA data={data}  />
        <ComponentB onformclick={handleData} />
      </div>
  );
}

export default App;

假设组件A类似于

const ComponentA: React.FC = ({props}) => {

const data = props.data; 

  return (
      <div>
        //any html here
        //example
        <div>
         {
          data ?
          data.property //any property existing on data
          :null
          }
        </div>
      </div>
  );
}

export default ComponentB;

假设组件A类似于

const ComponentA: React.FC = ({props}) => {

const [formdata, SetformData] = useState();

  return (
      <div>
        //form here 
        //any button or any element to submit form 
        <button onClick={()=>props.onformclick(formdata)}> submit </button>
      </div>
  );
}

export default ComponentB;

兄弟功能组件之间的数据共享-ReactJS

2 个答案: