最近我发现了一种很好的方法。

本质上，我只是useState，然后设置onChange作为孩子的道具，它将“value”作为参数，并将其放入useState“setVal”，boom，我得到状态改变child ->父母每次

const Parent = () => {
  const [val, setVal] = useState("initial value")
  return(
    <>
    <Child onChange={(value)=> setVal(value)}/>
    <div>{val}</div>
    </>
  )
};

export default Parent;

const Child = (props) => {
  return(
  <button onClick={() => props.onChange("your value here") }>
  )
}

在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开始，我建议在几乎所有情况下都使用功能组件。

反应。在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> ); } };

将数据从子组件传递给父组件

在父组件中:

getData(val){
    // do not forget to bind getData in constructor
    console.log(val);
}
render(){
 return(<Child sendData={this.getData}/>);
}

在子组件中:

demoMethod(){
   this.props.sendData(value);
 }

在这里，我试图用最简单的方式解释: 我正在从子组件更新父组件计数器。

父组件(propapp .jsx)

import React, { useState } from 'react'
import Child from './Child'

export default function PropsApp(){
   const [counter, setCounter] = useState(0)

   const updateMyCounter = () => {
       setCounter(counter + 1)
   }

   return(
    <>  
        <hr></hr>
        <h1>This is Parent</h1>
        <h2>{counter}</h2>
        <Child updateParent={updateMyCounter} />
    </>
   )
}

子组件(Child.jsx)

export default function Child(props){

return(
    <>  
        <hr></hr>
        <h1>This is Child</h1>
        <button
            onClick={props.updateParent}
        >
            Update Parent Component
        </button>
    </>
   )
}

单击Update父组件并查看神奇的效果

其思想是向子程序发送回调，该子程序将被调用以返回数据

一个使用函数的完整且最小的示例:

App将创建一个子程序，它将计算一个随机数并直接将其发送回父程序，父程序将console.log结果

const Child = ({ handleRandom }) => {
  handleRandom(Math.random())

  return <span>child</span>
}

const App = () => <Child handleRandom={(num) => console.log(num)}/>