gpt4 book ai didi

reactjs - OnClick 未触发路由器中的功能组件

转载 作者:行者123 更新时间:2023-12-02 00:31:41 24 4
gpt4 key购买 nike

我是 React JS 的新手,我在使用 onClick 事件时遇到了一些问题。我尝试了很多东西,但作为新手,我肯定遗漏了一些东西。我将 codesandbox 与 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 时没有任何反应,我哪里错了?

谢谢

最佳答案

这是因为,您没有将 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 的名称将事件处理函数传递给子组件。

关于reactjs - OnClick 未触发路由器中的功能组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51634984/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com