如何汇总反应

Question

我想将项目添加到总计中（添加价格）。因此，当我单击（添加到购物车）时，它只会添加商品数量，但我想准确添加（总和）价格。

    class BookStore extends Component {
        constructor(props){
            super(props);
            this.state = {
                total: 0,
                active: false, 

            }
            this.clicker = this.clicker.bind(this);

        }


    clicker() {
       let active = !this.state.active;
       this.setState({ 
           active: active, 
           total: this.state.total + 1

        })
    };


    render() {
        console.log(this.props.books);
        return (
            <div className='container'>
                <div className='row'>
                <span className='mt-4'>Total: {this.state.total}</span>
                    {this.props.books.map((book, i)=> {

                        return (
                            <>

                            <div className='col-12 card book-card' key={i}>
                                <div className='row'>
                                    <div className='col-8'>
                                        <h5>{book.name}</h5>
                                        <h6>$ {book.price}</h6>
                                    </div>

                                <div className='col-4'>
                                    <button onClick={this.clicker} className=' btn btn-success' style={{width: '50%', }}>add to cart</button>
                                </div>
                                </div>
                            </div>

                            </>
                        )
                    })}

                </div>
            </div>
        )
    }
}

那么我如何将该价格添加到与相应书籍相关的总计中。 （我的意思是，当我点击按钮时，我需要在 {this state total} 字段中显示总计

Answer 1

我不确定我的问题是否正确，但您是否尝试将图书价格传递给答题器功能并将其添加到总数中？如果是这样，这样的东西对你有用吗？

// ...

clicker(price) {
       let active = !this.state.active;
       this.setState({ 
           active: active, 
           total: this.state.total + price

        })
    };

// ...

<button onClick={() => this.clicker(book.price)} className=' btn btn-success' style={{width: '50%', }}>add to cart</button>

Answer 2

不确定我是否理解你的问题，但这里有一个使用你的代码的 React sn-p：

class BookStore extends React.Component {
    state = {
        total: 0,
        active: false
    };


    clicker = (book) => () => {
       this.setState(state => ({ 
           active: !state.active, 
           total: state.total + book.price
       }));
    };


    render() {
      return (
          <div className='container'>
              <div className='row'>
              <span className='mt-4'>Total: {this.state.total}</span>
                  {this.props.books.map((book, i) => {
                      return (
                          <div className='col-12 card book-card' key={i}>
                              <div className='row'>
                                  <div className='col-8'>
                                      <h5>{book.name}</h5>
                                      <h6>$ {book.price}</h6>
                                  </div>

                                <div className='col-4'>
                                    <button onClick={this.clicker(book)} className=' btn btn-success' style={{width: '50%', }}>add to cart</button>
                                </div>
                              </div>
                          </div>
                      )
                  })}
              </div>
          </div>
      )
  }
}

ReactDOM.render(
  <BookStore books={[{ name: "My Book", price: 20 }, { name: "My other Book", price: 50 }]} />,
  document.body
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 3

在您的 onClick 处理函数中，点击器发送价格作为参数。

<button onClick={() => this.clicker(book.price)} className=' btn btn-success' style={{width: '50%', }}>add to cart</button>

然后您可以在您的点击器功能中访问图书价格。

clicker(price) {
   this.setState({ 
       active: !this.state.active, 
       total: this.state.total + price
    })
};