Question

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

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的值？

Answer 1

您需要存储有关输入是否已被检查的信息＆＃34;在你的数据中。然后，只需简单地计算项目＆＃34;检查＆＃34;旗。

这是我的解决方案。你应该能够在这里获得原则并修改你的代码。

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')
);

Answer 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');

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

2 个答案: