Question

映射数组元素上的 onCLick 事件

2018-08-12

1747

arrays reactjs events onclick mapping

关键是要获得一个由映射数组构成的可点击 html 标签，并且仅单击由 onClick 事件触发的元素：

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>

如果您绝对不想在渲染方法中使用新的内联函数，您还可以使用 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>