映射数组元素上的onCLick事件

Question

事情是要获得一个可点击的html标签，该html标签是由映射数组并仅由onClick事件触发的clicked元素制成的：

class Elements extends Component {
        constructor(props) {
            super(props);
            this.state = {
                backgroundColor: 'pink'
            }
        }
        click = (e, i) => {
            this.setState({
                backgroundColor: 'blue'
            });
        }
        render() {
            let buttons = ['one','two','three','four'];
            return (
                <div>
                    {
                        buttons.map( (e, index) => {
                            return (
                                <button key={index}
                                        style={this.state.style}
                                        onClick={this.click}> {e} </button> 
                                              // e => this.click(e, i)?
                            );
                        } )
                    }
                </div>
            )
        }
    }

这可能可以通过使用e.currentTarget.style ....或使用带有单独选项（此处为“ i”）的onClick方法来解决，但我不了解这些方法背后的逻辑，也不知道如何正确应用它们。有人吗？

Answer 1

您可以将一个对象保留为状态，例如backgroundColors包含代表按钮及其背景颜色的键/值对。如果按钮在此对象中没有键，则可以后退到pink。

您可以使用新的嵌入式箭头功能将按钮名称发送到事件处理程序，就像注释中概述的那样。

示例

class Elements extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      buttons: ["one", "two", "three", "four"],
      backgroundColors: {}
    };
  }

  click = button => {
    this.setState(prevState => ({
      backgroundColors: {
        ...prevState.backgroundColors,
        [button]: "blue"
      }
    }));
  };

  render() {
    const { buttons, backgroundColors } = this.state;

    return (
      <div>
        {buttons.map(button => {
          return (
            <button
              key={button}
              style={{ backgroundColor: backgroundColors[button] || "pink" }}
              onClick={() => this.click(button)}
            >
              {button}
            </button>
          );
        })}
      </div>
    );
  }
}

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

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

如果您绝对不想在render方法中使用新的内联函数，也可以使用data-*属性。

示例

class Elements extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      buttons: ["one", "two", "three", "four"],
      backgroundColors: {}
    };
  }

  click = event => {
    const { button } = event.target.dataset;
    this.setState(prevState => ({
      backgroundColors: {
        ...prevState.backgroundColors,
        [button]: "blue"
      }
    }));
  };

  render() {
    const { buttons, backgroundColors } = this.state;

    return (
      <div>
        {buttons.map(button => {
          return (
            <button
              key={button}
              style={{ backgroundColor: backgroundColors[button] || "pink" }}
              data-button={button}
              onClick={this.click}
            >
              {button}
            </button>
          );
        })}
      </div>
    );
  }
}

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

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