[英]What is the best way to get the selected value from a React-Select component?
I am using react select to create a dropdown of options.我正在使用 react select 创建选项下拉列表。 I want to access the label on the dropdown but also access an associated value with the data.
我想访问下拉列表中的标签,但也想访问与数据相关的值。 For example:
例如:
import Select from 'react-select'
let options = [
{
label: Small,
change: -3
},
{
label: Medium,
change: 0
}
]
<Select id={"options"} defaultValue={options[0]} options={options} />
let selectedChange = // How can I access the change property?
let selectedLabel = document.querySelector(`#options`).textContent // This is how I have been getting the proper label
<button onClick={console.log(selectedChange, selectedLabel)}></button>
I would like to change the displayed cost of the item by adding the options change value to the default price, but I would only like to display the label in the select.我想通过将选项更改值添加到默认价格来更改项目的显示成本,但我只想在选择中显示标签。
The React-Select onChange
prop takes a method, and receives both the selected item(s), as well as the action being performed: React-Select
onChange
道具采用一个方法,并接收所选项目以及正在执行的操作:
function(
One of<
Object,
Array<Object>,
null,
undefined
>,
{
action required One of<
"select-option",
"deselect-option",
"remove-value",
"pop-value",
"set-value",
"clear",
"create-option"
>
}
) => undefined
It is up to you, as the developer, to chose what to do with the object(s) returned from this method.作为开发人员,您可以选择如何处理从该方法返回的对象。 For an example you can check this Codesandbox .
例如,您可以检查此Codesandbox 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.