我有一個表格，其中第一列的每一行都有一個復選框。如果選擇了多個復選框或未選中任何復選框，我想禁用按鈕。It should be active only if 1 checkbox is checked
import React, { useState } from "react";
import "./styles.css";
function Example() {
const [boxes, setBoxes] = useState([]);
function handleChange(e) {
const {
parentNode: { children }
} = e.target;
const index = [...children].indexOf(e.target);
const newState = [...boxes];
newState[index] = !newState[index];
setBoxes(newState);
}
function isDisabled() {
const len = boxes.filter((box) => box).length;
return len === 0 || len > 1;
}
return (
<div className="App">
<button disabled={isDisabled()}>Click Me</button>
<table>
<thead>
<th>One</th>
<th>Two</th>
<th>Three</th>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" onChange={handleChange} />
</td>
<td> two data</td>
<td> three data</td>
</tr>
<tr>
<td>
<input type="checkbox" onChange={handleChange} />
</td>
<td> two data</td>
<td> three data</td>
</tr>
<tr>
<td>
<input type="checkbox" onChange={handleChange} />
</td>
<td> two data</td>
<td> three data</td>
</tr>
</tbody>
</table>
</div>
);
}
export default Example;
如果所有復選框都在同一個父節點中，我就能夠完成這項作業。但是對于表格，每個復選框都在單獨的行中。
uj5u.com熱心網友回復：
您可以將 ID 分配給復選框并像這樣按照它們進行操作。
import React, { useState } from "react";
function Example() {
const [boxes, setBoxes] = useState({});
function handleChange(e) {
const {
target: { id, checked }
} = e;
setBoxes({ ...boxes, [id]: checked });
}
function isDisabled() {
const { length } = Object.values(boxes).filter(Boolean);
return length !== 1;
}
return (
<div className="App">
<button disabled={isDisabled()}>Click Me</button>
<table>
<thead>
<th>One</th>
<th>Two</th>
<th>Three</th>
</thead>
<tbody>
<tr>
<td>
<input id="1" type="checkbox" onChange={handleChange} />
</td>
<td> two data</td>
<td> three data</td>
</tr>
<tr>
<td>
<input id="2" type="checkbox" onChange={handleChange} />
</td>
<td> two data</td>
<td> three data</td>
</tr>
<tr>
<td>
<input id="3" type="checkbox" onChange={handleChange} />
</td>
<td> two data</td>
<td> three data</td>
</tr>
</tbody>
</table>
</div>
);
}
export default Example;
uj5u.com熱心網友回復：
你可以給他們所有的復選框一個名字，這個解決方案會很好用
import React, { useState } from "react";
function Example() {
const [btnStatus, setBtnStatus] = useState(true);
function handleChange(e) {
const elements = document.getElementsByName('checkbox');
let checkedCount = 0;
elements.forEach((element)=>{
if(element.checked){
checkedCount ;
}
})
if(checkedCount > 1 || checkedCount === 0){
setBtnStatus(true)
}else{
setBtnStatus(false)
}
}
return (
<div className="App">
<button disabled={btnStatus}>Click Me</button>
<table>
<thead>
<th>One</th>
<th>Two</th>
<th>Three</th>
</thead>
<tbody>
<tr>
<td>
<input name="checkbox" type="checkbox" onChange={handleChange} />
</td>
<td> two data</td>
<td> three data</td>
</tr>
<tr>
<td>
<input name="checkbox" type="checkbox" onChange={handleChange} />
</td>
<td> two data</td>
<td> three data</td>
</tr>
<tr>
<td>
<input name="checkbox" type="checkbox" onChange={handleChange} />
</td>
<td> two data</td>
<td> three data</td>
</tr>
</tbody>
</table>
</div>
);
}
export default Example;
uj5u.com熱心網友回復：
您的初始測驗（所有復選框都在同一個父節點中）正在運行，因為您依賴它們都在同一個父節點中：
const {
parentNode: { children }
} = e.target;
其中“兒童”是實際的復選框。在表格示例中，每個復選框的父級只有一個子級。
我會建議一個更靈活的解決方案，如下所示：
import React, { useState } from "react";
// use props to determine the number of records
function Example(props) {
// make sure initial state is known and false
const [boxes, setBoxes] = useState(new Array(props.recordsNo).fill(false));
// index - the index of the checkbox
function handleChange(index) {
const newState = [...boxes];
newState[index] = !newState[index];
setBoxes(newState);
}
function isDisabled() {
const len = boxes.filter((box) => box).length;
return len === 0 || len > 1;
}
// records will probably come through props => generate here an example
const records = [...Array(props.recordsNo).keys()];
// generate records display
const rows = records.map((value, i) => {
return (
<tr>
<td>
<input type="checkbox" onChange={() => handleChange(i)} />
</td>
<td> {i}</td>
<td> two data</td>
<td> three data</td>
</tr>
)
})
return (
<div className="App">
<button disabled={isDisabled()}>Click Me</button>
<table>
<thead>
<th>One</th>
<th>Two</th>
<th>Three</th>
</thead>
<tbody>
{rows}
</tbody>
</table>
</div>
);
}
export default Example;轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/362456.html
標籤：javascript 数组 反应