在React v16.8+函数组件中，你可以使用useState()来创建一个函数状态，让你更新父状态，然后将它作为props属性传递给子组件，然后在子组件中你可以触发父状态函数，下面是一个工作代码片段:

const { useState , useEffect } = React; function Timer({ setParentCounter }) { const [counter, setCounter] = React.useState(0); useEffect(() => { let countersystem; countersystem = setTimeout(() => setCounter(counter + 1), 1000); return () => { clearTimeout(countersystem); }; }, [counter]); return ( <div className="App"> <button onClick={() => { setParentCounter(counter); }} > Set parent counter value </button> <hr /> <div>Child Counter: {counter}</div> </div> ); } function App() { const [parentCounter, setParentCounter] = useState(0); return ( <div className="App"> Parent Counter: {parentCounter} <hr /> <Timer setParentCounter={setParentCounter} /> </div> ); } ReactDOM.render(<App />, document.getElementById('react-root')); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script> <div id="react-root"></div>

反应。在React的新版本中，createClass方法已经被弃用了，你可以用下面的方法很简单地让一个函数组件和另一个类组件来维护状态:

家长:

const ParentComp = () => { getLanguage = (language) => { console.log('父组件中的语言:'，Language); ｝ < ChildComp onGetLanguage = {getLanguage} };

孩子:

class ChildComp extends React.Component { state = { selectedLanguage: '' } handleLangChange = e => { const language = e.target.value; thi.setState({ selectedLanguage = language; }); this.props.onGetLanguage({language}); } render() { const json = require("json!../languages.json"); const jsonArray = json.languages; const selectedLanguage = this.state; return ( <div > <DropdownList ref='dropdown' data={jsonArray} value={tselectedLanguage} caseSensitive={false} minLength={3} filter='contains' onChange={this.handleLangChange} /> </div> ); } };

考虑到React函数组件和使用钩子现在越来越流行，我将给出一个简单的例子，说明如何将数据从子组件传递给父组件

在父函数组件中，我们将有:

import React, { useState } from "react";

then

const [childData, setChildData] = useState("");

和传递setChildData(它们的工作与此类似。setState在类组件)到子

return( <ChildComponent passChildData={setChildData} /> )

在子组件中，我们首先获得接收道具

function ChildComponent(props){ return (...) }

然后，您可以像使用处理程序函数一样以任何方式传递数据

const functionHandler = (data) => {

props.passChildData(data);

}

将数据从子组件传递到父组件的最佳方法

子组件

handleLanguageCode=()=>(langValue) {
  this.props.sendDatatoParent(langValue)
}

父

<Parent sendDatatoParent={data =>这个。setState({item: data})} />;

在React中，将数据从子组件传递给父组件:

从接收值的父节点向子节点传递一个函数。 当子组件中的值发生变化时，调用该函数 使用更新后的值。

e.g.

const Parent = () => {

  const handleChange = values => {
     alert(JSON.stringify(values) );
     //do something with the values  
  }

  return (
    <Child handleChange={handleChange} />
  );
}

const Child = ({handleChange}) => {
    return (
        <button onClick={()=> handleChange('values you wish to pass') }}></button>
    );
}

注意:从react 16开始，我建议在几乎所有情况下都使用功能组件。

 import { useEffect, useState } from "react";
  
  export default function App() {
    const data = (data) => {
      console.log("data", data);
    };
  
    const myData = {
      name: "hi this is my data"
    };
  
    return <Form onSubmit={data} myDatasa={myData} />;
  }
  
  const Form = (props) => {
    console.log("myData", props.myDatasa.name);
  
    const [choreDesc, setChoreDesc] = useState();
    const handleSubmit = (e) => {
      e.preventDefault();
      props.onSubmit(choreDesc);
    };
  
    const handlechange = (e) => {
      setChoreDesc(e.target.value);
    };
  
    return (
      <form
        onSubmit={(e) => {
          handleSubmit(e);
        }}
      >
        <label>Chore description:</label>
        <br />
        <input
          name="choreDesc"
          type="text"
          value={choreDesc}
          onChange={handlechange}
        />
        <br />
        <input type="submit" value="Add Log" />
      </form>
    );
  };
  ```