大佬教程收集整理的这篇文章主要介绍了React - 将数据计数器从子组件传递给父组件，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
所以，我只是在学习 props 方法，我想尝试如何将数据从子组件传递到父组件。
我正在尝试制作计数器应用程序，当点击+计数器增加并点击-计数器减少
我有这样的父组件
import React,{ useState } from 'react';
import ComponentB from './ComponentB'
const componentA = () => {
const [counterB,setCounterB] = useState(0);
return(
<div>
<h1>ComponentB</h1>
<h3>{CounterB}</h3>
<ComponentB
add={CounterB => setCounterB(counterB)}
subtract={CounterB => setCounterB(counterB)}/>
</div> );
}
export default ComponentA;
@H_419_10@和这样的子组件
import React from 'react';
const componentB = (props) =>{
return(
<div>
<button onClick={()=> props.add(+1)}>+</button>
<button onClick={()=> props.subtract(-1)}>-</button>
</div>
);
}
export default ComponentB
@H_419_10@我建议在父组件中创建一个方法，根据从子组件接收到的值来更新状态。
Sub如您所见，我的 class Parent extends Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
this.updateCountWithValue = this.updateCountWithValue.bind(this);
}
updateCountWithValue(value) {
let count = this.state.count;
count += value;
this.setState({
count: count
});
}
render() {
return (
<div>
<h1>{`Count: ${this.state.count}`}</h1>
<Child updateCount={this.updateCountWithvalue} value={1} />
<Child updateCount={this.updateCountWithvalue} value={-1} />
</div>
);
}
}
class Child extends Component {
render() {
return (
<div>
<button onClick={() => this.props.updateCount(this.props.value)}>
{this.props.value}
</button>
</div>
);
}
}
组件的 props 是：
Child 组件的方法。我制作了这个示例，以便您了解它是如何工作的：https://codesandbox.io/s/child-to-parent-uvfmi?file=/src/App.js
,userInput试试这个：
<ComponentB
add={CounterB => setCounterB(counterB)}
subtract={CounterB => setCounterB(counterB)}/>
与
arrayOfDoubles()()您将函数 return(
<div>
<h1>ComponentA</h1>
<h3>{CounterB}</h3>
<ComponentB
add={diff => setCounterB(counterB + diff)}
subtract={diff => setCounterB(counterB + diff)}/>
</div> );
作为 diff => setCounterB(counterB + diff) 传递给 ComponentB。此函数将 prop.add 的状态设置为该函数的第一个参数。因此，当按钮调用 counterB 时，每次按下时 props.add(+1)} 的值都会设置为 counterB。
您想要的是将 1 添加到 +1 的状态。因此你应该这样：
counterB// Get a hook function - only needed for this Stack Snippet
const {useStatE} = React;
const componentA = () => {
const [counterB,setCounterB] = useState(0);
return(
<div>
<h1>ComponentA</h1>
<h3>{CounterB}</h3>
<ComponentB
add={diff => setCounterB(counterB + diff)}
subtract={diff => setCounterB(counterB + diff)}/>
</div> );
}
const componentB = (props) =>{
return(
<div>
<button onClick={()=> props.add(+1)}>+</button>
<button onClick={()=> props.subtract(-1)}>-</button>
</div>
);
}
ReactDOm.render(
<ComponentA/>,document.getElementById("react")
);以上是大佬教程为你收集整理的React - 将数据计数器从子组件传递给父组件全部内容，希望文章能够帮你解决React - 将数据计数器从子组件传递给父组件所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。