Question

我在div中有一个按钮，我已经有一个选项'onClick'

我希望用户单击该星形图标，但不处理onClick，当他单击该项目时会调用它。屏幕截图： Item example

代码：

<a
      className="item type2"
      onClick={this.changeStatus}
      style={{display: toRender ? 'block' : 'none'}}
    >
      <div className="name">{this.getQuality(this.props.item.name)}</div>
      <div className="image"><img ref="image" src={this.props.item.image} /></div>
      <div className="icons"><i className="ico-star" onClick={this.addToFavourites}></i></div>
      <div className="price">
        ${(this.props.item.price / 100).toFixed(2)}
      </div>
    </a>

Answer 1

您到底想实现什么？

如果您尝试通过按钮单击来更新状态或完成某些操作，则可以通过您定义的功能来完成此操作：

addToFavourites = () => {
  this.setState({"someStateProperty": "update"})
}

如果您尝试更新状态或通过单击星号单击标签，我建议您添加一些有关您要做什么的详细信息。如果您想更新样式或其他内容，则应该能够通过单击星形来更新toRender的状态。

Answer 2

如果您希望可点击的子节点不触发父节点（event-bubbling），则可以使用Event.stopPropagation()。

这是一个运行中的小例子：

class App extends React.Component {
  anchor = () => console.log("anchor");

  button = e => {
    e.stopPropagation();
    console.log("button");
  };

  render() {
    return (
      <div>
        <div>
          <a
            onClick={this.anchor}
            style={{ border: "1px solid", padding: "15px" }}
          >
            I'm an anchor
            <button onClick={this.button}>Button</button>
          </a>
        </div>
      </div>
    );
  }
}

const root = document.getElementById("root");
ReactDOM.render(<App />, 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" />

如何在React中的另一个按钮处单击按钮？

2 个答案: