[英]onChange and onSelect are not working for Select inside a loop in React Hooks
我有一個場景,我需要在循環內有多個 Select 標簽,但 onselect 事件對它們中的任何一個都不起作用,請找到以下代碼。 提前致謝。
const ThirdStepMap = ({csvFields, profileFileds}) => { // last row, no border-bottom class to be added
const [selectData, setSelectData] = useState('');
console.log('selectData', selectData);
return(
<div className="modal-body no-pad">
<div className="ap-map-head">
<div className="row">
<div className="col p-0">CSV file field</div>
<div className="col p-0">Airborne fields</div>
</div>
</div>
<div className="ap-map-body">
{
csvFields.map(e => {
return(
<div className="row border-bottom">
<div className="col p-0">
<div className="form-group static-text d-flex align-items-center">
<label for="staticEmail" className=" col-form-label">{e}</label>
</div>
</div>
<div className="col p-0">
<div className="form-group">
<select className="form-control" onChange={(e) => setSelectData(e.target.value)}>
{
profileFileds.map(r => <option key={r.fieldName} selected={e.toLowerCase().startsWith(r.fieldName.toLowerCase().substr(0,3)) || r.fieldName === 'select'} value={r.fieldName}>{r.displayName}</option>)
}
</select>
</div>
</div>
</div>
)
})
}
</div>
</div>
)
}
這里的問題是您沒有將函數調用與事件綁定。 為此,您只需要做
<select className="form-control" onSelect={(e) => this.setSelectData.bind(this, e.target.value)}>
你到底是什么問題? 您的 console.log() 語句是否記錄了正確的值? 我相信您只是忘記在選擇元素上添加 value={selectData} 。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.