Question

如何使用列表中的单击事件呈现按钮？我不知道为什么我不能在列表中的每只狗旁边渲染一个按钮并将该狗添加到我的购物车阵列。我知道我在这里遗漏了一些东西，因为每当我向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>
      )

   }
})

Answer 1

    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'));

列表中的渲染按钮

1 个答案: