javascript - React JS:祖父组件的 setState 方法不会更新孙子输入字段 onChange 事件单击的状态
问题描述
在相同的代码中,我能够获取祖父组件的setState
方法来相应地更新onClick
来自孙子组件的事件,但是,对于该onChange
事件,它失败了。我没有收到任何错误。
class GrandChild extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
}
changeNumber=()=> {
this.props.changeNumber();//call child method
}
handleChange(e) {
this.props.onChange(e.target.value);
}
render() {
const data = this.props.data;
return(
<div>
<h1>The number is {this.props.number}</h1>
<input type="text" value = {data} onChange={this.handleChange} />
<button onClick={this.changeNumber}>Increase number by 1</button>
</div>
)
}
}
class Child extends React.Component {
render() {
return(
<div>
<GrandChild number={this.props.number} changeNumber={this.props.changeNumber} value={this.props.data} onChange={this.props.handleChange}/>
</div>
)
}
}
class App extends React.Component {
constructor() {
super()
this.state = {
number: 1,
data: ""
}
this.handleChange = this.handleChange.bind(this);
}
handleChange(data) {
this.setState({data:this.state.data});
console.log(data);
}
changeNumber=()=>{
this.setState((prevState)=>{
console.log(prevState,this.state.data);
return {
number : prevState.number + 1
}
});
}
render() {
const data = this.state.data;
const input = data;
return (
<Child number={this.state.number}
changeNumber = {this.changeNumber}
data={input}
onChange = {this.handleChange}
/>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
控制台结果: 对象 { 数据:“”,编号:1 } “”
结果截图: console.log 结果
查看实时代码的代码笔: https ://codepen.io/codehorse/pen/yLyEwBw?editors=0011
解决方案
您通过现场演示改进的代码https://codesandbox.io/s/laughing-sky-kk97b
需要改变什么 <GrandChild number={this.props.number} changeNumber={this.props.changeNumber} value={this.props.data} onChange={this.props.onChange}/>
完整代码
class GrandChild extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
}
changeNumber = () => {
this.props.changeNumber(); //call child method
};
handleChange(e) {
this.props.onChange(e.target.value);
}
render() {
const data = this.props.data;
return (
<div>
<h1>The number is {this.props.number}</h1>
<input type="text" value={data} onChange={this.props.onChange} />
<button onClick={this.changeNumber}>Increase number by 1</button>
</div>
);
}
}
class Child extends React.Component {
render() {
return (
<div>
<GrandChild
number={this.props.number}
changeNumber={this.props.changeNumber}
value={this.props.data}
onChange={this.props.onChange}
/>
</div>
);
}
}
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
number: 1,
data: ""
};
}
handleChange = e => {
this.setState({ data: e.target.value });
console.log(e.target.value);
};
changeNumber = () => {
this.setState(prevState => {
console.log(prevState, this.state.data);
return {
number: prevState.number + 1
};
});
};
render() {
const data = this.state.data;
const input = data;
return (
<Child
number={this.state.number}
changeNumber={this.changeNumber}
data={input}
onChange={this.handleChange}
/>
);
}
}
export default App;
推荐阅读
- python - 在python中,哪些二元运算符可以同时具有NoneType的操作数?
- php - 在这种情况下如何使用 Laravel 存储多个数据?
- bash - 如何遍历目录并仅显示文件名
- mongodb - 按多个字段分组并在两个条件下自定义总和
- list.js - 禁用 list.js 中的类似结果
- laravel - 在 Laravel 中对一个函数执行两个操作,可能吗?
- javascript - 我想重定向到一个网站,然后点击它上面的按钮
- c++ - 我可以一次检查一小部分布尔值吗?
- python - 如何将 Django request.FILES (这是一个图像)作为二进制文件读取
- haskell - 当我在另一个函数的应用程序中应用带有参数 n-1(无括号)的函数时,为什么会出现无限递归?