在 react.js 中的 select 选项的值字段中设置 id

Question

我在数据库中有一个 tblGender table，有 3 个字段 fldID、fldName 和 isActive。 tblEmployee table 有一个引用 tblGender 的 fldID 的外键。现在我正在从数据库中获取性别列表并将其设置如下：

正在获取数据：

fetch('api/Employee/GetGenders')
            .then(response => response.json() as Promise<Array<any>>)
            .then(data => {
                this.setState({ genderList: data });
            });

填充下拉列表：

<select className="form-control" data-val="true" name="FldGender" defaultValue={this.state.empData.FldGender} onChange={e => this.state.empData.FldGender = e.target.value} required>
                            <option value="">-- Select Gender --</option>
                            {this.state.genderList.map(gender =>
                                <option key={gender.fldID} value={gender.fldID}>{gender.fldName}</option>
                            )}
                        </select>

但 gender.fldID 未在值中设置。现在，如果我尝试设置 gender.fldName 它已成功设置。但是我想在下拉列表更改时得到 gender.fldID 。如何在 this.state.empData.FldGender 的 onChange 事件中设置 fldID 而不是 fldName？

Answer 1

看起来你有错字。你的 genderList 数据有 fldId 但在你的代码中你提到它为 fldID 。请更改您的选项如下

<option key={gender.fldId} value={gender.fldId}>{gender.fldName}</option>

在 react.js 中的 select 选项的值字段中设置 id

set id in value field of select option in react.js

javascript

json

onchange

reactjs