如何在单击时从另一个同级组件中增加一个值?
How to increment a value in one sibling component from another on click?
function LeagueBadge(props) {
return (
<img src={props.badgeUrl} alt="missing alt text" />
);
}
class LeagueInfo extends Component {
constructor(props) {
super(props);
this.state = {
amountOfPlayers: null,
rpPerSecond: null,
rpCost: null,
};
}
render() {
return (
<div>
<h4>{this.props.name} players: {this.props.amountOfPlayers}</h4>
<h4>RP per second: {this.props.rpPerSecond}</h4>
<h4>RP cost: {this.props.rpCost}</h4>
</div>
);
}
}
class League extends Component {
render() {
return (
<div>
<LeagueBadge badgeUrl={this.props.badge} />
<LeagueInfo name={this.props.name} />
</div>
);
}
}
class App extends Component {
render() {
return (
<div className="App">
<h1>Players</h1>
<League name="Bronze" badge={ require('./bronze.png') }></League>
<League name="Silver" badge={ require('./silver.png') }></League>
<League name="Gold" badge={ require('./gold.png') }></League>
<League name="Platinum" badge={ require('./platinum.png') }></League>
<League name="Diamond" badge={ require('./diamond.png') }></League>
<League name="Master" badge={ require('./master.png') }></League>
<League name="Challenger" badge={ require('./challenger.png') }></League>
</div>
);
}
}
我希望能够单击作为 LeagueBadge 组件的图像并增加其兄弟 LeagueInfo 中 amountOfPlayers 的值。我已经用谷歌搜索了 react siblings communication,只找到了带有 input 标签和 onChange 的例子,但在这里我想要 img 标签或按钮和 onClick。
您可以将 amountOfPlayers
的状态提升到 <Leauge />
组件中,以便:
- 可以从 <LeagueBadge />
触发更新
- 而且,该状态可以传递给您的 <LeagueInfo />
组件
这将允许您根据需要在 <LeagueInfo />
和 <LeagueBadge />
兄弟姐妹之间共享和同步状态。
为此,您需要向 <LeagueBadge />
添加一个 onClick
回调,当 img
元素被点击时触发。在 <Leauge />
渲染方法中,您可以提供在 <Leauge />
中递增 amountOfPlayers
状态的逻辑。当 amountOfPlayers
递增并调用 setState
时(在 <Leauge />
中),这反过来会导致您的 <Leauge />
组件重新呈现自身(并且 children/siblings).因为 amountOfPlayers
的更新值作为 prop 传递给 <LeagueInfo />
组件,所以这个更新值将在 <LeagueInfo />
中呈现 - 有效地实现你所追求的。
类似这样的东西可能对你有用:
class LeagueBadge extends Component {
render() {
// Add props.onClick callback to trigger click event in <League />
// component
return (
<img src={this.props.badgeUrl} alt="missing alt text"
onClick={() => this.props.onClick()} />
);
}
}
class LeagueInfo extends Component {
constructor(props) {
super(props);
this.state = {
// amountOfPlayers: null, // This is not needed, as it's supplied by props
rpPerSecond: null,
rpCost: null,
};
}
render() {
return (
<div>
<h4>{this.props.name} players: {this.props.amountOfPlayers}</h4>
<h4>RP per second: {this.props.rpPerSecond}</h4>
<h4>RP cost: {this.props.rpCost}</h4>
</div>
);
}
}
class League extends Component {
componentWillMount() {
this.setState({
amountOfPlayers : 0
})
}
render() {
// Locally defined function that increments amountOfPlayers and
// updates state
const incrementAmountOfPlayers = () => {
this.setState({ amountOfPlayers :
this.state.amountOfPlayers + 1 })
}
return (
<div>
<LeagueBadge badgeUrl={this.props.badge}
onClick={ () => incrementAmountOfPlayers() } />
<LeagueInfo name={this.props.name} amountOfPlayers={ this.state.amountOfPlayers } />
</div>
);
}
}
将您的状态保留在联赛组件中,并传递负责将其更改为 LeagueBadge 的函数,例如:
class League extends Component {
constructor(props) {
super(props);
this.state = {
amountOfPlayers: null,
};
}
handleClick = () => {
this.setState(prevState => {
return {amountOfPlayers: prevState.amountOfPlayers + 1}
})
}
render() {
return (
<div>
<LeagueBadge badgeUrl={this.props.badge} incrementPlayers={this.handleClick}/>
<LeagueInfo name={this.props.name} amountOfPlayers={this.state.amountOfPlayers}/>
</div>
);
}
}
function LeagueBadge(props) {
return (
<img src={props.badgeUrl} alt="missing alt text" onClick={this.props.incrementPlayers}/>
);
}
在您的信息组件中使用 this.props.amountOfPlayers
。
function LeagueBadge(props) {
return (
<img src={props.badgeUrl} alt="missing alt text" />
);
}
class LeagueInfo extends Component {
constructor(props) {
super(props);
this.state = {
amountOfPlayers: null,
rpPerSecond: null,
rpCost: null,
};
}
render() {
return (
<div>
<h4>{this.props.name} players: {this.props.amountOfPlayers}</h4>
<h4>RP per second: {this.props.rpPerSecond}</h4>
<h4>RP cost: {this.props.rpCost}</h4>
</div>
);
}
}
class League extends Component {
render() {
return (
<div>
<LeagueBadge badgeUrl={this.props.badge} />
<LeagueInfo name={this.props.name} />
</div>
);
}
}
class App extends Component {
render() {
return (
<div className="App">
<h1>Players</h1>
<League name="Bronze" badge={ require('./bronze.png') }></League>
<League name="Silver" badge={ require('./silver.png') }></League>
<League name="Gold" badge={ require('./gold.png') }></League>
<League name="Platinum" badge={ require('./platinum.png') }></League>
<League name="Diamond" badge={ require('./diamond.png') }></League>
<League name="Master" badge={ require('./master.png') }></League>
<League name="Challenger" badge={ require('./challenger.png') }></League>
</div>
);
}
}
我希望能够单击作为 LeagueBadge 组件的图像并增加其兄弟 LeagueInfo 中 amountOfPlayers 的值。我已经用谷歌搜索了 react siblings communication,只找到了带有 input 标签和 onChange 的例子,但在这里我想要 img 标签或按钮和 onClick。
您可以将 amountOfPlayers
的状态提升到 <Leauge />
组件中,以便:
- 可以从 <LeagueBadge />
触发更新
- 而且,该状态可以传递给您的 <LeagueInfo />
组件
这将允许您根据需要在 <LeagueInfo />
和 <LeagueBadge />
兄弟姐妹之间共享和同步状态。
为此,您需要向 <LeagueBadge />
添加一个 onClick
回调,当 img
元素被点击时触发。在 <Leauge />
渲染方法中,您可以提供在 <Leauge />
中递增 amountOfPlayers
状态的逻辑。当 amountOfPlayers
递增并调用 setState
时(在 <Leauge />
中),这反过来会导致您的 <Leauge />
组件重新呈现自身(并且 children/siblings).因为 amountOfPlayers
的更新值作为 prop 传递给 <LeagueInfo />
组件,所以这个更新值将在 <LeagueInfo />
中呈现 - 有效地实现你所追求的。
类似这样的东西可能对你有用:
class LeagueBadge extends Component {
render() {
// Add props.onClick callback to trigger click event in <League />
// component
return (
<img src={this.props.badgeUrl} alt="missing alt text"
onClick={() => this.props.onClick()} />
);
}
}
class LeagueInfo extends Component {
constructor(props) {
super(props);
this.state = {
// amountOfPlayers: null, // This is not needed, as it's supplied by props
rpPerSecond: null,
rpCost: null,
};
}
render() {
return (
<div>
<h4>{this.props.name} players: {this.props.amountOfPlayers}</h4>
<h4>RP per second: {this.props.rpPerSecond}</h4>
<h4>RP cost: {this.props.rpCost}</h4>
</div>
);
}
}
class League extends Component {
componentWillMount() {
this.setState({
amountOfPlayers : 0
})
}
render() {
// Locally defined function that increments amountOfPlayers and
// updates state
const incrementAmountOfPlayers = () => {
this.setState({ amountOfPlayers :
this.state.amountOfPlayers + 1 })
}
return (
<div>
<LeagueBadge badgeUrl={this.props.badge}
onClick={ () => incrementAmountOfPlayers() } />
<LeagueInfo name={this.props.name} amountOfPlayers={ this.state.amountOfPlayers } />
</div>
);
}
}
将您的状态保留在联赛组件中,并传递负责将其更改为 LeagueBadge 的函数,例如:
class League extends Component {
constructor(props) {
super(props);
this.state = {
amountOfPlayers: null,
};
}
handleClick = () => {
this.setState(prevState => {
return {amountOfPlayers: prevState.amountOfPlayers + 1}
})
}
render() {
return (
<div>
<LeagueBadge badgeUrl={this.props.badge} incrementPlayers={this.handleClick}/>
<LeagueInfo name={this.props.name} amountOfPlayers={this.state.amountOfPlayers}/>
</div>
);
}
}
function LeagueBadge(props) {
return (
<img src={props.badgeUrl} alt="missing alt text" onClick={this.props.incrementPlayers}/>
);
}
在您的信息组件中使用 this.props.amountOfPlayers
。