下記のような形でtdをクリックするとclass on が付与され背景に色がつくようにしたのですが、排他的?というのでしょうか。クリックしたもの以外のtdのonは取り除きたいのですがどのように書けばよいでしょうか?
class Sample1 extends React.Component{ constructor(props) { super(props); } render() { return ( <table> <tr> <Td label="1" /> <Td label="2" /> <Td label="3" /> <Td label="4" /> <Td label="5" /> <Td label="6" /> <Td label="7" /> </tr> <tr> <Td label="8" /> <Td label="9" /> <Td label="10" /> <Td label="11" /> </tr> </table> ); } } class Td extends React.Component{ constructor(props) { super(props); this.handleClick = this.handleClick.bind(this); this.state = { clicked: false }; this.on = ""; } handleClick(e) { this.setState({ clicked: !this.state.clicked }); } render() { this.on = this.state.clicked ? "on" : ""; return ( <td onClick={this.handleClick} className={theme[this.on]}> {this.props.label} </td> ); } }
現状はクリック↓物自体のon/offはできているのですが、
他の番号のものをどんどん追加でクリックできてしまうので、
必ずonがつくものはひとつのtdにしたいのです。
あなたの回答
tips
プレビュー