Some code samples for this pupose:
import React from "react"; import MyDemo from "./mydemo.jsx"; export default class Square extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; this.handleChange = this.handleChange.bind(this); this.changeMyStateFromChild = this.changeMyStateFromChild.bind(this); } componentDidMount() { let me = this; me.setState({ count: me.state.count + 1 }); console.log(me.state.count); // 打印出0 me.setState({ count: me.state.count + 1 }); console.log(me.state.count); // 打印出0 setTimeout(function() { me.setState({ count: me.state.count + 1 }); console.log(me.state.count); // 打印出2 }, 0); setTimeout(function() { me.setState({ count: me.state.count + 1 }); console.log(me.state.count); // 打印出3 }, 0); } handleChange(e) { let me = this; const target = e.target; console.log(me); alert(me.state.count); this.setState({ [target.name]: target.value }); console.log(MyDemo); } changeMyStateFromChild(state) { // this.setState(state); debugger; alert(state); } render() { return ( <div onChange={e => this.handleChange(e)}> <MyDemo title={this.state.count} changeParent={this.changeMyStateFromChild} /> <input type="text" name="username" /> <input type="text" name="password" /> <button onClick={() => alert(MyDemo.title)}>click </button> <h1>{this.state.count}</h1> </div> ); } }