javascript - 在 React 中，对于一系列按钮，如何在单击后更改颜色，同时记录单击了哪个按钮？

Question

我有一个子组件，它是一个按钮，单击后状态更新会改变颜色。然而，我还需要在一系列此类按钮中识别正在单击的按钮。代码在 sandbox或以下。我怎样才能这样做呢？如果我对子组件有一个操作，那么如何正确调用父组件上的onclick？

按钮.js

import React, { Component } from 'react';
import './style.css'

class Button extends React.Component {
    constructor(props){
        super(props);

        this.state = {
           clicked: false
        }
    }

    changeColor=()=>{
       this.setState({clicked: !this.state.clicked})
    }

    render(){
        let btn_class = this.state.clicked ? "redButton" : "whiteButton";

        return (
             <button className={btn_class} onClick={this.changeColor.bind(this)}>
                  {this.props.name}
             </button>
        )
    }
}
export default Button;

index.js

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
import Button from './button.js'

const btns= ['button1','button2','button3']
const n = btns.length

class App extends Component {
  constructor() {
    super();
    this.state = {
      clickedBtn : "",
      btnStyle: new Array(n)
    };
  }

handleClick= (index) => 
  {
    alert(index)
  }

  render() {
    return (
      <div>
            {btns.map((btn, index) => (
                      <Button 
                        name={btn} 
                        onClick={this.handleClick.bind(this,index)}/>
                    ))}
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

Answer 1

您可以为此使用通用处理函数。现在也没有理由将方法绑定(bind)到类 - 如果您使用箭头函数来定义方法，则不再需要这样做。

最后，您可能应该使用 setState 提供的回调来调用 Button 组件内部的 onClick 属性。

有关 setState 回调的更多信息:使用回调的方式如下:

setState({ some: "newState"}, function() { /* this is the callback function */ })

使用 setState 回调:

class Button extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      clicked: false
    };
  }

  handleClick = event => {
    this.setState({ 
      clicked: !this.state.clicked 
    }, () => { // Should prob use the callback that setState provides
      if (this.props.onClick) this.props.onClick() 
    });
  };

  render() {
    let btn_class = this.state.clicked ? "redButton" : "whiteButton";

    return (
      <button className={btn_class} onClick={this.handleClick}>
        {this.props.name}
      </button>
    );
  }
}

const btns= ['button1','button2','button3']
const n = btns.length

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      clickedBtn: "",
      btnStyle: new Array(n)
    };
  }

  handleClick = index => {
    alert(index);
  };

  render() {
    console.log(this.state.clickedTag);
    return (
      <div>
        {btns.map((btn, index) => (
          <Button name={btn} onClick={() => this.handleClick(index)} />
        ))}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

h1, p {
  font-family: Lato;
}

.whiteButton{
  background-color: white
}

.redButton{
  background-color: red
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

<小时/>

不使用 setState 回调:

class Button extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      clicked: false
    };
  }

  handleClick = event => {
    this.setState({ 
      clicked: !this.state.clicked 
    });
    if (this.props.onClick) this.props.onClick()     
  };

  render() {
    let btn_class = this.state.clicked ? "redButton" : "whiteButton";

    return (
      <button className={btn_class} onClick={this.handleClick}>
        {this.props.name}
      </button>
    );
  }
}

const btns= ['button1','button2','button3']
const n = btns.length

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      clickedBtn: "",
      btnStyle: new Array(n)
    };
  }

  handleClick = index => {
    alert(index);
  };

  render() {
    console.log(this.state.clickedTag);
    return (
      <div>
        {btns.map((btn, index) => (
          <Button name={btn} onClick={() => this.handleClick(index)} />
        ))}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

h1, p {
  font-family: Lato;
}

.whiteButton{
  background-color: white
}

.redButton{
  background-color: red
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>