[英]Is there a way to get checkbox's checked value in array? [React]
此復選框[看起來像切換按鈕]基於數據生成。 我想在數組中獲取選中的值。
碼
{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>
);
我的onChange方法
如果單擊該按鈕,我將獲得該按鈕的名稱。
onChangeFavorite(event) {
if(!event.target.checked){
console.log(event.target.name);
}
};
我的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"}
問題
我想在單擊按鈕時獲取數組中的所有選中值。
你可以試試這樣使用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>
);
那么你可以將this.checkBoxes稱為常規數組
您的輸入字段:
<input type="checkbox" id={"smscheckbox" + key} value={e.isactive} name={"checkbox-toggle"+e.smstemplateid} onChange={(event) => this.onChangeFavorite(event, key)} checked={e.isactive === "ON"} />
你的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.state.customersmsselect.filter((item) => item.isactive === "ON");
這將為您提供當前為ON的ID數組,我假設它是您想要的值?
this.state.customersmsselect.filter((item) => item.isactive === "ON").map((item) => item.smstemplateid);
演示: https : //codesandbox.io/s/quiet-morning-j6dbx? fontize = 14
在這里,我們可以使用受控輸入。 然后我們需要綁定checked屬性並在onChange處理程序中設置狀態。 checked={e.isactive === "ON"}
根據值檢查復選框。 onChange={()=>this.onChangeFavorite(e)}
將附加事件處理程序以及正在映射的customersmsselect項。
x.isactive = x.isactive === "OFF" ? "ON" : "OFF";
this.setState({
customersmsselect: this.state.customersmsselect
});
是否需要檢查輸入。
{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>
);
然后
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.