列表中的渲染按钮

Rendering button inside a list

本文关键字：按钮 列表      更新时间：2023-09-26

如何在列表中呈现带有click事件的按钮?我不知道为什么我不能在列表中的每个狗旁边呈现一个按钮，并将该狗添加到我的购物车数组中。我知道我在这里错过了一些东西，因为每当我向onClick事件添加一个函数时，我必须得到一个错误，因为我的整个接口消失了。假设我有一个组件:

var PetStore = React.createClass({
   getInitalState: function() {
      return ({
       cart: []
    })
   },
  addToCart: function(dog) {
    this.setState({
    cart: this.state.cart.concat([dog])
   })
 },
  render: function() {
     return (
       <ul>
         {this.props.dogs.map(function(dog){
          return <li>Breed: {dog.breed}, age: {dog.age} 
         <button onClick={this.addToCart}>Buy</button></li>
         })}
       </ul>
      )
   }
})

    var DOGS = [{
  breed: 'Husky',
  age: 5
}, {
  breed: 'Pit bull',
  age: 2
}, {
  breed: 'Golden Retriever',
  age: 10
}, {
  breed: 'Black lab',
  age: 2
}]
var PetStore = React.createClass({
  propTypes: {
    dogs: React.PropTypes.array
  },
  getInitialState: function() {
    return ({
      cart: []
    })
  },
  addToCart: function(dog) {
    this.setState({
      cart: this.state.cart.concat([dog])
    })
  },
  render: function() {
console.log(this.props);
    var self = this;
    return (
      <ul>
        {this.props.dogs.map(function(dog, index){
          return (<li key={index}>Breed: {dog.breed}, age: {dog.age} <button onClick={self.addToCart.bind(self,dog)}>Buy</button></li>)
    })}
      </ul>
    )
  }
})
ReactDOM.render(<PetStore dogs={DOGS}/>, document.getElementById('test'));
相关文章：