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

【问题标题】：Count checked checkboxes in React.js计算 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 的值？

【问题讨论】：

标签： javascript checkbox reactjs

【解决方案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;

【讨论】：