-3
私はループを通ってすべてのリスト項目が作成されるReactコンポーネントとしてHTMLリストを持っています。Reactでクリックしたもの以外のリスト項目を非表示にする
これは私がReactで達成したいものです。リスト項目の1つの
- クリックして、私は
- すべてのリスト項目を表示しているリスト項目をクリックし、今
アイデア
おかげ
イアン
私はループを通ってすべてのリスト項目が作成されるReactコンポーネントとしてHTMLリストを持っています。Reactでクリックしたもの以外のリスト項目を非表示にする
これは私がReactで達成したいものです。リスト項目の1つの
アイデア
おかげ
イアン
はこれを試してみてください:
<div id="app"></app>
そして:
class Application extends React.Component {
constructor(props){
super(props);
this.state = {
one: "",
two: "",
three: "",
four: "",
clicked: false
}
}
handleClick(name, event){
event.preventDefault();
if(this.state.clicked){
this.setState({one: "",two: "", three: "", four: "", clicked: false})
}else{
switch(name){
case "One":
this.setState({two: "hide", three: "hide", four: "hide", clicked: true});
break;
case "Two":
this.setState({one: "hide", three: "hide", four: "hide", clicked: true});
break;
case "Three":
this.setState({two: "hide", one: "hide", four: "hide", clicked: true});
break;
default:
this.setState({two: "hide", three: "hide", one: "hide", clicked: true});
}
}
}
render() {
return <div>
<ul>
<a href="" className={this.state.one} onClick={this.handleClick.bind(this, "One")}><li >One</li></a>
<a href="" className={this.state.two} onClick={this.handleClick.bind(this, "Two")}><li>Two</li></a>
<a href="" className={this.state.three} onClick={this.handleClick.bind(this, "Three")}><li>Three</li></a>
<a href="" className={this.state.four} onClick={this.handleClick.bind(this, "Four")}><li>Four</li></a>
</ul>
</div>;
}
}
React.render(<Application />, document.getElementById('app'));
こんにちはイアン!あなたはStackOverflowを初めて使ったようです。 [最小限で完全で検証可能なサンプルを作成する方法](http://stackoverflow.com/help/mcve)をお読みください。そうすることで、他のユーザーに必要な回答を与える機会が増えます。 –