もしかするとreact以前の問題かもしれないのですが・・・
class Names extends React.Component{ constructor(props) { super(props); this.state = { bg: "#fff", }; this.nameClick = this.nameClick.bind(this); } nameClick() { this.setState({bg:"#ff0000"}); } render() { return ( <ul> <li onClick={this.nameClick} style={background:this.state.bg}><a href="#">名前</a></li> </ul>
上記でクリックしたliの背景に色がつくかと思いますが、
liが何十もある場合どのようにかいたらスマートでしょうか?
class Names extends React.Component{ constructor(props) { super(props); this.state = { bg1: "#fff", bg2: "#fff", bg3: "#fff", }; } //略 <ul> <li onClick={this.nameClick1} style={background:this.state.bg1}><a href="#">名前</a></li> <li onClick={this.nameClick2} style={background:this.state.bg2}><a href="#">名前</a></li> <li onClick={this.nameClick3} style={background:this.state.bg3}><a href="#">名前</a></li> </ul>
こんな感じは非効率ですし・・・
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/02/14 06:02