Javascript 在下拉列表中选择选项时，如何使用onChange更改状态，但使用选项标记内的值以外的值

需要一些下拉列表的帮助。我似乎无法找到一种方法来传递特定于该特定下拉列表的ID，以便当用户进行选择时，该值可以用于设置状态。通常的情况是读取下拉列表本身的值，但在我的情况下，我不想要显示的值，而是另一个“幕后”或隐藏的值

请注意，我已经研究过react for forms等中的受控组件，这个问题有点不同，我试图找到答案的尝试结果是空的

我正在使用react和javascript，但我认为如果您对javascript稍有了解，您可能会有所帮助

下拉列表的设置如下所示，在更改下拉选择时，它运行函数handleStatusChange

这是做这件事的标准方法

现在我们回到问题上来-是否有一种方法可以从每个下拉列表中读取一个未显示的值，而不是从e.target.value读取，即，如果每个下拉列表都有一个ID或其他内容，我如何传递该ID，以便e.target.value能够访问该ID

如果您不熟悉map函数，请查看我映射或循环的版本，在每次迭代中，我都会使用{status.title}传入标题。我可以使用status.id访问id，但onChange处理程序位于标记中，不能位于映射/循环中，因此也不可能通过将id传入onChange处理程序来处理它

onChange处理程序访问标记之间未显示的特定值的正确方法是什么

是否有一种方法可以从每个下拉列表中读取未显示的值，而不是从e.target.value读取的值，即，如果每个下拉列表都有ID或其他内容，我如何传递该ID，以便e.target.value能够访问该ID

e、 target是对发生更改的htmlselect元素的引用。您可以在选项列表中找到具有匹配值的选项，然后使用该HTMLOptionElement的属性，如下所示：

handleStatusChange({target}) {
    const value = target.value;
    const optionElement = Array.from(target.options).find(opt => opt.value === value);
    // If found, use information from `optionElement` to find the
    // entry in `statusData` in a state change, e.g.:
    if (optionElement) {
        const id = optionElement && optionElement.id;
        if (id) {
            this.setState(state => {
                const entry = state.statusData.find(e => e.id === id);
                if (entry) {
                    // Use `entry`'s information
                }
            }
        }
    }
}

例如，对statusData中的条目使用details属性：

类示例扩展了React.Component{ 构造函数…参数{ 超级…args； this.handleStatusChange=this.handleStatusChange.bindthis； 此.state={ 详情：， 状态数据：[ {id:one，title:one，detail:Details for one}， {id:two，title:two，detail:detailsfortwo}， {id:3，title:3，detail:detailsforthree} ] }; } HandleStatus更改{target}{ 常量值=target.value； const optionElement=Array.fromtarget.options.findopt=>opt.value==value； const id=optionElement&&optionElement.id； 如果id{ this.setStatestate=>{ const entry=state.statusData.finde=>e.id==id； 如果输入{ 返回{ 详细信息：entry.detail } } }; } } 渲染{ const{statusData，detail}=this.state； 回来 请选择 {状态数据？ statusData.mapstatus=> {status.title} : 加载。。。 } 详细信息：{Detail} ; } } ReactDOM.render , document.getElementByIdroot ; 是否有一种方法可以从每个下拉列表中读取未显示的值，而不是从e.target.value读取的值，即，如果每个下拉列表都有ID或其他内容，我如何传递该ID，以便e.target.value能够访问该ID

e、 target是对发生更改的htmlselect元素的引用。您可以在选项列表中找到具有匹配值的选项，然后使用该HTMLOptionElement的属性，如下所示：

handleStatusChange({target}) {
    const value = target.value;
    const optionElement = Array.from(target.options).find(opt => opt.value === value);
    // If found, use information from `optionElement` to find the
    // entry in `statusData` in a state change, e.g.:
    if (optionElement) {
        const id = optionElement && optionElement.id;
        if (id) {
            this.setState(state => {
                const entry = state.statusData.find(e => e.id === id);
                if (entry) {
                    // Use `entry`'s information
                }
            }
        }
    }
}

例如，对statusData中的条目使用details属性：

类示例扩展了React.Component{ 构造函数…参数{ 超级…args； this.handleStatusChange=this.handleStatusChange.bindthis； 此.state={ 详情：， 状态数据：[ {id:one，title:one，detail:Details for one}， {id:two，title:two，detail:detailsfortwo}， {id:3，title:3，detail:detailsforthree} ] }; } HandleStatus更改{target}{ 常量值=target.value； const optionElement=Array.fromtarget.options.findopt=>opt.value==value； const id=optionElement&&optionElement.id； 如果id{ this.setStatestate=>{ const entry=state.statusData.finde=>e.id==id； 如果输入{ 返回{ 详细信息：entry.detail } } }; } } 渲染{ const{statusData，detail}=this.state； 回来 请选择 {状态数据？ statusData.mapstatus=> {status.title} : 加载。。。 } 详细信息：{Detail} ; } } ReactDOM.render , document.getElementByIdroot ;

---

您可以将选项保持在组件状态，并使用数组方法find查找与选定选项对应的选项并使用该选项

范例

类应用程序扩展了React.Component{ 状态={ 选项：[ {value:status1，label:Status 1，secretValue:foo}， {value:status2，label:Status 2，secretValue:bar}， {值：status3，标签：Status 3，secretValue:baz} ], 选择选项： }; handleStatusChange=e=>{ const{value}=e.target； this.setStateprevState=>{ const{secretValue}=prevState.options.find option=>option.value==value ; console.logsecretValue； 返回{selectedOption:value}； }; }; 渲染{ const{options，selectedOption}=this.state； 回来 请选择 {options.mapoption=> {option.label} } ; } } ReactDOM.render、document.getElementByIdroot；

---

您可以将选项保持在组件状态，并使用数组方法find查找与选定选项对应的选项并使用该选项

范例

类应用程序扩展了React.Component{ 状态={ 选项：[ {value:status1，label:Status 1，secretValue:foo}， {value:status2，label:Status 2，secretValue:bar}， {值：status3，标签：Status 3，secretValue:baz} ], 选择选项： }; handleStatusChange=e=>{ const{value}=e.target； this.setStateprevState=>{ const{secretValue}=prevState.options.find option=>option.value==value ; console.logsecretValue； 返回{selectedOption:value}； }; }; 渲染{ const{options，selectedOption}=this.state； 回来 请选择 {options.mapoption=> {option.label} } ; } } ReactDOM.render、document.getElementByIdroot；

---

可以将该值传递给显示选项的循环

{statusData ? (
    statusData.map((status) => (
        <option value={status.value}>{status.title}</option>
    ))
  ) : (
    <option>Loading...</option>
  )}

---

可以将该值传递给显示选项的循环

{statusData ? (
    statusData.map((status) => (
        <option value={status.value}>{status.title}</option>
    ))
  ) : (
    <option>Loading...</option>
  )}

---

每个未显示的下拉列表和标记之间未显示的特定值是什么意思？@remix23因为我可以通过e.target.value获得文本之间的值，该值显示给用户，但我想获得每个选项的id，而不是显示给用户。如果我把id放在每个循环上，我可以得到它，但是客户端可以看到它。你说的每个没有显示的下拉列表和标签之间没有显示的特定值是什么意思？@remix23，因为我可以通过e.target.value获得文本之间的值，它显示给用户，但是我想得到每个选项的id，而不是显示给用户。如果我把id放在每个循环上，我可以得到它，但是客户端可以看到它。谢谢，但我认为这是不可能的，因为这个数组来自我用来获取数据的后端。实际上，第二个函数将转换来自后端的数组。谢谢，但我认为这是不可能的，因为这个数组来自后端从后端获取数据。实际上，第二个函数将转换来自后端的数组。

{statusData ? (
    statusData.map((status) => (
        <option value={status.value}>{status.title}</option>
    ))
  ) : (
    <option>Loading...</option>
  )}

hiddenData = ['a', 'b', 'c'];
statusData.map((s, index) => {
    s.value = hiddenData[index]
    return s;
});