gpt4 book ai didi

javascript - 在 React.js 中计算选中的复选框

转载 作者:行者123 更新时间:2023-12-03 22:48:40 25 4
gpt4 key购买 nike

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

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

最佳答案

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

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

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

关于javascript - 在 React.js 中计算选中的复选框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35987097/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com