Question

如果我有一些不是React组件的按钮，例如添加到篮子：

<button value="1">Buy Product 1</button>
<button value="2">Buy Product 2</button>
<button value="3">Buy Product 3</button>

我有一个React组件，用于存储点击按钮的值（例如一个篮子视图），如何从点击反应组件的按钮获取数据？对于每个按钮，这样的事件监听器是否足够？：https://facebook.github.io/react/tips/dom-event-listeners.html）我正在尝试在所有客户端执行此操作，因为按钮将在页面加载时呈现为服务器端。

提前致谢！

修改根据以下建议，这里有更多背景信息：

问题是按钮是在PHP中生成的，不会一个接一个地重复。我们有一个预先存在的twig模板产品列表系统，因此唯一真正的解决方案是保持按钮呈现原样，并使用反应组件进行购物篮视图。因此，点击预先存在的非反应按钮需要将值（产品sku / id）传递给react组件以更新购物篮

Answer 1

您可以尝试这样的事情：

class App extends Component {
  constructor(props) {
    this.state = {
      basket: []
    }
    this.addItemToBasket = this.addItemToBasket.bind(this);
  }

  addItemToBasket(e) {
    let item = e.value;
    let basket = this.state.basket;
    basket.push(item);
    this.setState({basket: basket});
  }

  render() {
    return(
      <button value="1" onClick={this.addItemToBasket(this)}>Buy Product 1</button>
      <button value="2" onClick={this.addItemToBasket(this)}>Buy Product 2</button>
      <button value="3" onClick={this.addItemToBasket(this)}>Buy Product 3</button>
     <Basket items={this.state.basket} />
    }
  }
}

这将在单击每个按钮时调用addItemToBasket，然后将该项添加到购物篮并使用新购物篮设置状态。然后，您可以将状态作为道具传递到要显示添加内容的组件。

非组件onclick触发器React组件更新

1 个答案: