react 複数のクリックイベント

Question

もしかすると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>

こんな感じは非効率ですし・・・

Answer 1

単純に見た目だけを変えるなら、クリックしたら色が変わる<li/>要素を出力するコンポーネントに外出して、Mapしてしまうのが早いと思います。

もしもステートの変化を親要素に伝播する必要があるならば、外出したコンポーネントにその関数を渡してマウント先からコールバックを呼ぶようにすると、render関数内で新しい関数を定義することなくやりたいことが実現できるはずです。

class Li extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = { clicked: false };
    this.handleClick = this.handleClick.bind(this)
  }

  handleClick() {
    this.setState({ clicked: !this.state.clicked });
  }
 
  render() {
    const { name } = this.props;
    const background = this.state.clicked ? "#fff" : "#f00";
    return <li style={{ background }} onClick={this.handleClick}>{name}</li>;
  }
}

const names = ["a", "b", "c"];
class Names extends React.Component{
  render() {
    return <ul>{ names.map((name, idx) => <Li key={`${name}-${idx}`} name="xxx" /> }</ul>;
  }
}

Comments

[cheche0830]

ありがとうございます！そういう方法もあるんですね。jqueryしかさわってこなかったので、なかなかreactの思想になれずに・・・クリックのたびに再レンダリングはまさにreactライクな考え方ですね。