Question

我是React JS的新手，在onClick事件上遇到了一些麻烦。我尝试了多种方法，但由于是新手，所以我肯定会丢失一些东西。我正在将codeandbox与react-router-dom配合使用。

这是我的代码，我尝试删除了不必要的部分。

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组件中的某个元素指定click事件，如下所示：

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以外的其他名称将事件处理函数传递给子组件。

Answer 2

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}
              char={char}
              selectCharacter={ props.selectCharacter(char)}
            />
          ))}
        </div>
      </div>      
    </div>
  );
};


const CharacterCardSelection = props => {
  return (
    <div onClick={() => props.selectCharacter(props.char)}>
      <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不触发路由器中的功能组件

2 个答案: