javascript - 如何在单击时从另一个同级组件中增加一个值？

Question

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 的值。我已经在 google 上搜索过 React brothers communications，只找到了带有 input 标签和 onChange 的示例，但在这里我想要 img 标签或按钮和 onClick。

Answer 1

您可以解除 amountOfPlayers 的状态进入您的<Leauge />组件，以便:- 更新可以从<LeagueBadge />触发- 并且，该状态可以传递给您的<LeagueInfo />组件

这将允许您在 <LeagueInfo /> 之间共享和同步状态和<LeagueBadge /> sibling ，如您所需要。

为此，您需要添加 onClick回调至<LeagueBadge />当 img 时被触发单击元素。在 <Leauge /> render 方法中，您可以提供递增 amountOfPlayers 的逻辑状态为<Leauge /> 。当 amountOfPlayers递增，并且 setState被调用(在 <Leauge /> 中)，这反过来会导致你的 <Leauge />组件重新渲染自身(以及子/ sibling )。因为 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>
        );
    }
}