如何在react中获得多个选中的复选框值?选中的复选框位于 bootstrap 模式中。
我尝试使用状态获取复选框值,但是它不起作用。
要打开 bootstrap 模式:
<a
variant="primary"
onClick={this.handleShow}
style={{ cursor: 'pointer', fontWeight: '700', fontSize: '16px' }}
>
<b>Choose Employee Under Him/Her</b>
</a>
引导程序模态的主体,并带有以下复选框:
<Modal.Body>
<div class="form-group" id="sampleTableForEmployee">
<table className="table table-hover table-bordered" id="sampleTable">
<thead>
<tr>
<th>Name</th>
<th>Employee ID</th>
<th>Select</th>
</tr>
</thead>
<tbody>
{(() => {
if (this.state.allemployees && this.state.allemployees.length > 0) {
return this.state.allemployees.map(employee => (
<tr key={employee.empmainid}>
<td>{employee.empname}</td>
<td>{employee.empid}</td>
<td>
<input
onChange={this.handleCheckbox}
className=""
type="checkbox"
name="allemployyes1[]"
value={employee.empmainid}
/>
</td>
</tr>
));
} else {
return (
<tr>
<td colSpan="3" className="text-center" style={{ color: 'red', fontSize: '20px' }}>
Sorry, There are no employees under the selected department
</td>
</tr>
);
}
})()}
</tbody>
</table>
</div>
<div className="form-group">
<button
type="submit"
className="btn btn-primary pull-right"
id="btnContactUs"
onClick={this.handleHide}
>
DONE
</button>
<br />
<br />
</div>
</Modal.Body>
我已经定义了this.state = {allemployees1: []}
处理复选框的方法:
handleCheckbox(event, isChecked, value) {
var newArray = this.state.allemployyes1.slice();
newArray.push(event.target.value);
this.setState({ allemployyes1: newArray });
console.log(this.state.allemployyes1);
}
答案 0 :(得分:0)
您应该更新点击事件功能和渲染方法。
// The event handle function takes only one argument
handleCheckbox(event) {
const {value, checked} = event.target; // get id and checked status
var allemployyes1 = this.state.allemployyes1.slice();
// Add to an array if checked and remove - if uncheck
if (checked) {
allemployyes1.push(value);
} else {
allemployyes1 = allemployyes1.filter(id => id !== value);
}
this.setState({ allemployyes1: allemployyes1 });
}
// You should set the checked status to the checkbox via checked attr
<tbody>
{(() => {
if (this.state.allemployees && this.state.allemployees.length > 0) {
return (this.state.allemployees.map((employee) => (
<tr key={employee.empmainid}>
<td>{employee.empname}</td>
<td>{employee.empid}</td>
<td><input onChange={this.handleCheckbox} className="" type="checkbox" name={employee.empmainid} value={employee.empmainid} checked={this.state.allemployyes1.includes(employee.empmainid)} /></td>
</tr>))
} else {
return (
<tr>
<td colSpan="3" className="text-center" style={{ color: 'red', fontSize: '20px' }}>Sorry, There are no employees under the selected department</td>
</tr>
)
}
})()}
</tbody>
此代码应正常运行。