选择复选框并显示行- React js

Question

如何使用react redux编写动态复选框。实际上，我想显示在最后一行当我们点击所有复选框时它会显示在最后一行超链接

当我们选中所有复选框并显示下面代码的最后一个链接行部分时。如果取消选中，最后一行将被隐藏。

这里我使用react-bootstrap。请帮忙解决这个

<div>
<Row>
<Col>
<h1 >
test
</h1>
</Col>
</Row>
{orders.map((order, index) => (
<Row className="mt-4" key={index}>
<Col>
<Form.Check
type="checkbox"
label={order.name}
name={order.name}
onChange ={handleChange}
/>
</Col>
</Row>
))}
<Row className="mt-4">
{isAllChecked && (
<Col>
<h2l>
<strong>test?</strong>
</h2>
</Col>
)}
</Row>
<Row>
{isAllChecked && (
<Col>
<Link to="/test3" style={{ color: '#009540', fontSize: '20px' }}>
click here
<FontAwesomeIcon
icon={faArrowRight}
style={{ color: '#009540', marginBottom: '-3px' }}
/>{' '}
</Link>
</Col>
)}
</Row>
</div>

Answer 1

您可以迭代orders数组并检查每个元素是否具有真isChecked属性。

Array.prototype.every

every()方法测试数组中的所有元素是否通过由提供的函数实现的测试。返回一个布尔值

const isAllChecked = orders.every(({ isChecked }) => isChecked);

然后有条件地呈现"div .

条件呈现

{
isAllChecked && (
<HomenetText headingSmall>
<strong>Fortsatt uten nett?</strong>
</HomenetText>
)
}