[英]Is there a way to get checkbox's checked value in array? [React]
This checkbox [ looks like toggle button] generated based on data. 此复选框[看起来像切换按钮]基于数据生成。 I want to get checked values in an array. 我想在数组中获取选中的值。
Code 码
{this.state.customersmsselect.map((e, key) => {
if(e.isactive == "ON"){
return (
<div key={key}>
<div className="form-group col-md-8">
<label className="col-md-4 control-label">{e.notificationtype}</label>
<div className="col-md-4 smart-form">
<label className="toggle">
<input type="checkbox" id={"smscheckbox" + key} value={e.isactive + "," + e.smstemplateid} name={"checkbox-toggle"+e.smstemplateid} onChange={this.onChangeFavorite} defaultChecked />
<i data-swchoff-text='OFF' data-swchon-text='ON' ></i>
</label>
</div>
</div>
<div style={{ margin: 10 }}> </div>
</div>
);
My onChange method 我的onChange方法
If click on that button then I will get, that button's name. 如果单击该按钮,我将获得该按钮的名称。
onChangeFavorite(event) {
if(!event.target.checked){
console.log(event.target.name);
}
};
My customersmsselect array looks like 我的customersmsselect数组看起来像
0: {smstemplateid: "1", notificationtype: "Invoice Details", isactive: "ON"}
1: {smstemplateid: "2", notificationtype: "Payment Thank-You", isactive: "ON"}
2: {smstemplateid: "3", notificationtype: "Daily Closing Balance", isactive: "OFF"}
3: {smstemplateid: "4", notificationtype: "Monthly Closing Balance", isactive: "ON"}
Problem 问题
I want to get all the checked values in an array when I click on the button. 我想在单击按钮时获取数组中的所有选中值。
you can try use ref like this: 你可以试试这样使用ref:
{this.state.customersmsselect.map((e, key) => {
$('#s').val(key);
if(e.isactive == "ON"){
return (
<div key={key}>
<div className="form-group col-md-8">
<label className="col-md-4 control-label">{e.notificationtype}</label>
<div className="col-md-4 smart-form">
<label className="toggle">
<input type="checkbox" id={"smscheckbox" + key} value={e.isactive + "," + e.smstemplateid} name={"checkbox-toggle"+e.smstemplateid} onChange={this.onChangeFavorite} defaultChecked ref={node => { this.checkBoxes[key] = node; }} />
<i data-swchoff-text='OFF' data-swchon-text='ON' ></i>
</label>
</div>
</div>
<div style={{ margin: 10 }}> </div>
</div>
);
then you can refer to this.checkBoxes as a regular array 那么你可以将this.checkBoxes称为常规数组
Your input field: 您的输入字段:
<input type="checkbox" id={"smscheckbox" + key} value={e.isactive} name={"checkbox-toggle"+e.smstemplateid} onChange={(event) => this.onChangeFavorite(event, key)} checked={e.isactive === "ON"} />
Your onChange event: 你的onChange活动:
onChangeFavorite(event, index) {
const shouldBeOnOrOff =
this.state.customersmsselect[index].isactive === "ON" ? "OFF" : "ON";
this.setState({
customersmsselect: this.state.customersmsselect.map((item, i) =>
index === i ? { ...item, isactive: shouldBeOnOrOff } : item
)
});
}
This will give you an array of objects that are currently ON: 这将为您提供当前打开的对象数组:
this.state.customersmsselect.filter((item) => item.isactive === "ON");
This will give you an array of IDs that are currently ON, which I assume is the value you want? 这将为您提供当前为ON的ID数组,我假设它是您想要的值?
this.state.customersmsselect.filter((item) => item.isactive === "ON").map((item) => item.smstemplateid);
DEMO: https://codesandbox.io/s/quiet-morning-j6dbx?fontsize=14 演示: https : //codesandbox.io/s/quiet-morning-j6dbx? fontize = 14
Here we can instead use controlled inputs. 在这里,我们可以使用受控输入。 Then we need to bind the checked attribute and set the state in onChange handler. 然后我们需要绑定checked属性并在onChange处理程序中设置状态。 checked={e.isactive === "ON"}
checks the checkbox depending on the value. checked={e.isactive === "ON"}
根据值检查复选框。 onChange={()=>this.onChangeFavorite(e)}
will attach the event handler along with the customersmsselect item which is being mapped. onChange={()=>this.onChangeFavorite(e)}
将附加事件处理程序以及正在映射的customersmsselect项。
x.isactive = x.isactive === "OFF" ? "ON" : "OFF";
this.setState({
customersmsselect: this.state.customersmsselect
});
Does the required checking of the input. 是否需要检查输入。
{this.state.customersmsselect.map((e, key) => {
$('#s').val(key);
if(e.isactive == "ON"){
return (
<div key={key}>
<div className="form-group col-md-8">
<label className="col-md-4 control-label">{e.notificationtype}</label>
<div className="col-md-4 smart-form">
<label className="toggle">
<input type="checkbox" id={"smscheckbox" + key} value={e.isactive + "," + e.smstemplateid} name={"checkbox-toggle"+e.smstemplateid} onChange={()=>this.onChangeFavorite(e)} checked={e.isactive === "ON"} />
<i data-swchoff-text='OFF' data-swchon-text='ON' ></i>
</label>
</div>
</div>
<div style={{ margin: 10 }}> </div>
</div>
);
Then 然后
onChangeFavorite(x) {
//Here now we are directly changing the array element value.
//Since its in the state when we change and assign it will automatically
//update the controlled components.
x.isactive = x.isactive === "OFF" ? "ON" : "OFF";
this.setState({
customersmsselect: this.state.customersmsselect
});
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.