计算 React.js 中选中的复选框

Posted 2023-03-05

【中文标题】计算 React.js 中选中的复选框

【英文标题】：Count checked checkboxes in React.js

【发布时间】：2016-06-29 11:10:03

【问题描述】：

我正在使用这样的文档结构

render() 
return (
    <div className="MyComponent">
        <ul className="">
            parseRecommendations(this.props.recommendations)
        </ul>
    </div>
);


function parseRecomendations(recommendations) 
    return recommendations.map((recommendation, key) => 
        return (<Recommendation data=recommendation key=key />);
    );

每个推荐都是它自己的组件，其中包含一个复选框

class Recommendation extends Component 
    const recommendation = this.props.data;
    const pageUrl = recommendation.url;

    return (
        <li className="article-item" key=key>
            <div className="article-info">
                <input type="checkbox" defaultChecked="checked" aria-described-by=recommendation.pii />
                <a className="journal-title" href=pageUrl id=recommendation.pii>recommendation.title</a>
            </div>
        </li>
    );

我想要一个标题为 [下载 (x) PDF]，其中 x 是选中复选框的数量。在这种情况下如何找到 x 的值？

【参考方案1】：

您需要在数据中存储有关输入是否“检查”的信息。然后，只需计算带有真实“已检查”标志的项目。

这是我的解决方案。你应该可以在这里得到原理并修改你的代码。

const data = [
     checked: false, value: 'document 1' ,
     checked: true, value: 'document 2' ,
     checked: true, value: 'document 3' ,
     checked: false, value: 'document 4' ,
     checked: false, value: 'document 5' ,
];

const Item = props => (
    <div>
        <input type="checkbox" checked=props.checked onChange=props.onCheckChange />
         props.value 
    </div>
)
var Hello = React.createClass(
    getInitialState() 
        return 
            items: this.props.items.concat(),
        ;
    ,

    onCheckChange(idx) 
        return () => 
            const items = this.state.items.concat();
            items[idx].checked = !items[idx].checked;
            this.setState(items);
        
    ,

    totalChecked() 
        return this.state.items.filter(props => props.checked).length;
    ,

  render() 
    return (
            <div>
                 this.state.items.map((props, idx) => (
                    <Item ...props key=idx onCheckChange=this.onCheckChange(idx) />
                )) 
                Total checked:  this.totalChecked() 
            </div>
        );
  
);

ReactDOM.render(
  <Hello items=data />,
  document.getElementById('container')
);

【讨论】：

在 onCheckChange 中维护一个计数并存储在状态中，而不是对它们进行计数。可能并不理想，但却是一个可行的选择。

你维护的状态越少越好。计算总数并不昂贵。就个人而言，不会将其存储在状态中。另一方面，我同意你的看法。在某些情况下，明智的做法是缓存某些操作的结果。

【参考方案2】：

如果你只是想获得选中复选框的数量，你可以试试这个

let checkedBoxes = document.querySelectorAll('input[name=chkBox]:checked');

然后通过checkedBoxes.length获取总选中框

编辑：

而不是查询整个document。您可以通过getElementsByClassName 或getElementById 获得最近的可能父级，然后在该元素上应用querySelectorAll。

例如

let elem = document.getElementsByClassName("MyComponent");

let checkedBoxes = elem.querySelectorAll('input[name=chkBox]:checked');

【讨论】：

请提供这样的答案，至少建议 OP 应用范围 - 不要查询 document。

【参考方案3】：

您还可以按元素类型获取选中复选框的总数。当使用 useEffect Hook 改变 totalSelectedCheckboxes 的状态时，“console.log(totalSelectedCheckboxes)”将打印它们。

import React,  useState, useEffect  from 'react';

const RenderCheckboxes = () => 
    const [totalSelectedCheckboxes, setTotalSelectedCheckboxes] = useState(0);
    function handleChk() 
        setTotalSelectedCheckboxes(document.querySelectorAll('input[type=checkbox]:checked').length);
    
    useEffect(() => 
        console.log(totalSelectedCheckboxes);
    , [totalSelectedCheckboxes]);
    return (<div>
        <div>
            <input type="checkbox" value=1 onChange=() => handleChk() />Chk1
        </div>
        <div>
            <input type="checkbox" value=2 onChange=() => handleChk() />Chk2
        </div>
        <div>
            <input type="checkbox" value=2 onChange=() => handleChk() />Chk2
        </div>
    </div>);

export default RenderCheckboxes;