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