显示一个值并使用HTML <select>和<option>标记将另一个值发送到后端
显示一个值并使用HTML <select>和<option>标记将另一个值发送到后端
提问于 2021-06-17 01:31:46
我在做一个笔记网络应用。富文本编辑器包括一个下拉菜单，其中包含用户的每个笔记本的名称，以便用户可以选择笔记的位置。到目前一切尚好。问题是，从理论上讲，用户可以给两个笔记本命名相同的东西。因此，当用户选择一个笔记本时，前端最终需要将与该特定笔记本关联的ID slug发送到后端，以便Django可以选择将笔记与哪个笔记本关联，而不会有歧义。
问题是我不知道如何让HTML、<select>和<option>标签做我想让它们做的事情。我尝试在HTML标记之间输入一个值(以便显示它)，并将ID作为标记的value属性传递，但这似乎不起作用：
setNotebooks(notebookList.map(item => {
return (
<option value={item.notebook_id}>
{item.name}
</option>
);当我以上面所示的方式设置notebooks时，它返回为未定义。在本例中，notebookList是一个包含每个notebook属性的对象数组。
我尝试将<select> one中的每个<option>标记包装在一个具有其自身状态的高阶组件中，以允许我将ID存储在那里，但这似乎也不起作用。
如何将每个明文名称与其各自的ID段关联，以便前端知道将哪个ID传递给后端，同时仍向用户显示明文名称？
回答 2
Stack Overflow用户
回答已采纳
发布于 2021-06-19 03:41:11
事实证明，react-select包包含了我需要的一切。我可以根据我创建的对象生成<option>标签，当我尝试赋值来声明它时，它只会在™中工作：
export function SelectNotebook({ currentNotebook, notebookOptions, setCurrentNotebook }) {
const customStyles = {
control: base => ({
...base,
width: 300,
minWidth: 300,
})
}
return (
<Select
options={notebookOptions}
value={currentNotebook}
onChange={option => setCurrentNotebook(option)}
placeholder='Select Notebook...'
styles={customStyles}
/>
);
}Stack Overflow用户
发布于 2021-06-17 03:23:59
我不是react的专家，但我认为你需要在select元素中设置value="somevariable"属性，它将保存当前选择的option值。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68007537
复制相关文章
相似问题
腾讯云开发者
