首页 > 解决方案 > 如何减少和增加reactJS中复选框的值?

问题描述

class App extends React.PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            total: 0,
            groupSelected:false
        };
    }
}

我有复选框:

{check1 && size(check1) ? (
    map(check1, (ind, i) => {
        return (
            <AvCheckbox
                key={i}
                value={ind.id}
                onClick={() => this.setState({ groupSelected: !groupSelected })
                onChange={(e) => {this.add(e.target.value, ind.size)}}
            />
        )
    )

    add(value, size) {
        const { groupSelected } = this.state;

        if (groupSelected === true) {
          const total = this.state.total - parseInt(size);
    
          this.setState({
              total,
          });
        
        } else {
          const total = this.state.total + parseInt(size);

          this.setState({
            total,
        });
    }
}

这是我写的,如果用户点击一个复选框,一个值会增加,如果他点击另一个框值会减少。

我想根据复选框增加和减少总数。请帮忙。

标签: javascriptreactjs

解决方案


考虑使用以下内容更新您的状态:

this.setState(prevState => {
       return {total: prevState.total + parseInt(size)}
    })

推荐阅读