Question

不幸的是，我不理解渲染中输入checkbox的逻辑。这是问题所在：

1）我有输入类型复选框，上面带有onChange和checked属性；
2）还有一个按钮handleSearch，它在单击按钮后从后端获取API信息；
3）如果我点击checkbox，它也会从API接收信息（与第二步中相同的API使用相同的参数）。

问题是：如果我单击checkbox，它将发送checkbox的虚假参数，因为据我所知，由于某种原因，它反之亦然。但是，如果我尝试先单击按钮，它将正常运行。

所以我需要在处理checbox时发送真实参数。

render（）中的输入：

    <input
        type="checkbox"
        className="custom-control-input"
        name="grouping"
        id="updateprice"
        checked={grouping}
        onChange={this.onGroupingChange}
    />

复选框处理程序（）：

      onGroupingChange = (e) => {
         const {grouping} = this.state;
        this.setState({ grouping: e.target.checked});
             this.getSales(grouping);
    };

OnClick处理程序（）：

      handleSearch = () => {
        const { grouping  } = this.state;
        this.setState({ isLoading: true });
        this.getSales(grouping);
    };

getSales（）

getSales = (grouping) => {
        let notattr;
        if (grouping===false){
            notattr=1
        }
        else notattr = 0
        this.setState({isLoading: true})
        Axios.get('/api/report/sales', {
            params: { notattr }

        })
        .then(res => res.data)
            .then((sales) => {
                this.setState({
                    sales,
                    isLoading: false,
                    handleGrouping: true,
                    activePage: 1,
                    currentRange: {
                        first: (this.state.itemsPerPage) - this.state.itemsPerPage,
                        last: (this.state.itemsPerPage) - 1
                    },
                    orderBy: ''
                })
            })
            .catch((err) => {
                this.setState({isLoading: false})
                console.log(err)
            })
    };

基本问题场景1：
1）我正在打开页面；
-屏幕true中的复选框；
2）我点击搜索按钮；
-API发送noattr:0是因为grouping:true;
3）现在，我要单击复选框；
-API 静止发送noattr:0是因为grouping:true（但我期望的是grouping:false值）
4）如果稍后我将处理复选框，反之亦然。但是如果我要处理搜索按钮，它将发送OK信息。
显然，某个地方存在小错误，但是我尝试了许多不同的组合，但似乎找不到合适的组合。

Answer 1

      onGroupingChange = (e) => {
         const {grouping} = this.state;
        this.setState({ grouping: e.target.checked});
             this.getSales(grouping);
    };

我认为您应该这样打： this.getSales（e.target.checked）

您要使用先前的值而不是更新的值来调用getSales函数。

反应输入复选框不会间接更新状态

1 个答案: