OnClick 不触发路由器中的功能组件

Question

我是 React JS 的新手，我在处理 onClick 事件时遇到了一些麻烦。我尝试了很多东西，但由于我是新手，我肯定错过了一些东西。我正在使用带有 react-router-dom 的 codeandbox。

这是我的代码，我试图删除不需要的部分。

class Game extends React.Component {
  state = { selectedCharacters: [], minPlayer: 10, };
  selectCharacter = clickedCharacter => {
    this.setState(prevState => ({
      selectedCharacters: prevState.selectedCharacters.concat(clickedCharacter)
    }));
  };
  render() {
    const { selectedCharacters } = this.state;
    return (
      <div>
        <CharactersSelection availableCharacters={this.props.availableCharacters} selectedCharacters={selectedCharacters}          selectCharacter={this.selectCharacter}/>
      </div>
    );
  }
}

const CharactersSelection = props => {
  return (
    <div>
      <div className="row">
        <div className="row justify-content-center">
          {props.availableCharacters.map((char, i) => (
            <CharacterCardSelection
              imgName={char.imgName}
              name={char.name}
              maxInGame={char.maxInGame}
              onClick={() =>props.selectCharacter(char)}
            />
          ))}
        </div>
      </div>      
    </div>
  );
};

const CharacterCardSelection = props => {
  return (
    <div>
      <img className="char-img-sm" src={require("../../public/images/" + props.imgName)}/>
      <div className="char-card-selection-txt">
        <div className="char-card-selection-name">{props.name}</div>
        <div>{props.maxInGame}</div>
      </div>
    </div>
  );
};

const Content = props => {
  return (
    <Router>
      <div className="content align-items-stretch">
        <div className="row">
           <div className="menu col-2">
             <div>
              <Link to="/charactersSelection" class="bm-item"style={menuLinkStyle}>
                <i class="fas fa-fw fa-play-circle" />
                <span>Nouvelle Partie</span>
              </Link>
            </div>
          </div>
          <div className="contentGame col-10">
            <div>
               <Route path="/charactersSelection" component={() => (<Game {...props} availableCharacters={props.availableCharacters}/>)}/>
            </div>
          </div>
        </div>
      </div>
    </Router>
  );
};

class App extends React.Component {
  availableCharacters = [{ imgName: "base_loup.png", name: "Loup Garou", maxInGame: 4 },{ imgName: "base_chasseur.png", name: "Chasseur", maxInGame: 1 },       { imgName: "base_voyante.png", name: "Voyante", maxInGame: 1 }];
  render() { return ( <div> <Content availableCharacters=this.availableCharacters} /> </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

当我点击 CharacterCardSelection 组件时什么也没有发生，我错在哪里？

谢谢

Answer 1

这是因为，您没有将onClick事件附加到任何节点，您只是将函数传递给子组件，这里：

<CharacterCardSelection
  imgName={char.imgName}
  name={char.name}
  maxInGame={char.maxInGame}

  onClick={() => props.selectCharacter(char)}       // <====== here

/>

我们在 props 中传递的所有值都只是对象 (props) 条目，我们需要在子组件中使用这些值，然后才会起作用。

您需要为 CharacterCardSelection 组件中的某个元素指定点击事件，如下所示：

const CharacterCardSelection = props => {
  return (

    <div onClick={props.onClick}>         // <======= notice onClick in this line

      <img className="char-img-sm" src={require("../../public/images/" + props.imgName)}/>
      <div className="char-card-selection-txt">
        <div className="char-card-selection-name">{props.name}</div>
        <div>{props.maxInGame}</div>
      </div>
    </div>
  );
};

建议：最好使用不同的名称，而不是onClick将事件处理函数传递给子组件。