React中点击事件添加位置及跨组件修改状态的实现咨询

一、点击事件应该加在哪里？ #

在React类组件中，点击事件的绑定主要有两种常见场景，结合你的PokemonList代码来举例：

1. 父组件中给子组件绑定点击事件

你的PokemonList作为父组件负责渲染Pokemon子组件，你可以在渲染Pokemon时，通过props把点击事件传递过去：

class PokemonList extends Component {
  constructor(props){
    super(props);
    this.state = { 
      pokemons : [], 
      pokemon : {} 
    };
    // 类组件中若不用箭头函数，需手动绑定this
    this.handlePokemonClick = this.handlePokemonClick.bind(this);
  }

  componentWillMount(){
    fetch('https://pokeapi.co/api/v2/pokemon/')
      .then(res=>res.json())
      .then(response=>{
        // PokeAPI返回的列表数据在results字段中
        this.setState({ pokemons : response.results });
      })
      .catch(err => console.log('请求出错：', err));
  }

  handlePokemonClick(selectedPokemon) {
    // 点击后修改父组件的state
    this.setState({ pokemon: selectedPokemon });
  }

  render() {
    return (
      <div className="pokemon-list">
        {this.state.pokemons.map(poke => (
          <Pokemon 
            key={poke.name} 
            pokemon={poke}
            onClick={() => this.handlePokemonClick(poke)} // 传递点击事件给子组件
          />
        ))}
      </div>
    );
  }
}

2. 子组件内部绑定点击事件

如果希望点击Pokemon组件的具体元素（比如卡片本身）触发事件，可以在Pokemon组件内部的JSX元素上绑定onClick，并调用父组件传递过来的方法：

import React, { Component } from 'react';

class Pokemon extends Component {
  render() {
    const { pokemon, onClick } = this.props;
    return (
      // 点击卡片时触发父组件传递的onClick方法
      <div className="pokemon-card" onClick={() => onClick(pokemon)}>
        <h3>{pokemon.name}</h3>
        <p>详情链接：{pokemon.url}</p>
      </div>
    );
  }
}

export default Pokemon;

二、点击触发时能否修改其他组件的状态？ #

直接修改其他组件的私有状态是不允许的，因为React中组件的状态是自身私有的。但可以通过以下几种方式实现跨组件的状态同步：

1. 状态提升（最常用）

把需要共享的状态提升到共同的父组件中，子组件通过props接收状态和修改状态的方法。比如上面的例子，我们把pokemon（选中的宝可梦）状态放在PokemonList父组件中，Pokemon子组件通过点击事件调用父组件的handlePokemonClick方法来修改这个状态。如果还有其他子组件需要使用这个选中状态，直接从父组件传递props即可。

2. 使用Context API

如果组件层级较深，传递props过于繁琐，可以使用React的Context API来共享状态和状态修改方法，让任意层级的组件都能访问和修改共享状态。

3. 状态管理库（如Redux）

对于大型应用，推荐使用Redux这类状态管理库，把所有需要共享的状态集中存储，组件通过dispatch action来修改状态，实现全局状态的同步。

内容的提问来源于stack exchange，提问作者Sergey Shpironok