我Map了从api获取的依赖项列表。每个依赖项都有相应的复选框和输入框。
const [depInput, setDepInput]= useState({disable:"true", checked:"false"});
<div>
{items.dependents?.map((item, key) => {
return (
<p key={key}> Name: {item.name} </p>
<div>
<input
type="checkbox"
value={!depInput.checked}
onChange={() => setDepInput(!depInput.disable)}
disable={!depInput.disable} />
</div>
<div>
<input type="text"
placeholder="Enter correct detail"
disabled={!depInput.disable}
onChange={() => setDepInput(!depInput.checked)} />
</div>
<div>
<select defaultValue={item.type_of_dependent}>
<option>Primary</option>
<option>Secondary</option>
<option> NA</option>
</select>
</div>
</>
);
})}
</div>
当我单击第一个依赖项的复选框时,它将禁用其他输入文本框。我希望每个复选框和相应的输入文本框都有一个切换状态。
1条答案
按热度按时间4zcjmb1e1#
我已经为您添加了一个演示,它应该可以帮助您。您需要的是每个复选框的单独状态。我已经添加了评论,请让我知道这是否有助于您https://codesandbox.io/s/elegant-northcutt-growt?file=/src/app.js