javascript - What is the best way to get the selected value from a React-Select component? - Stack Overflow

admin管理员组

文章数量:1026989

I am using react select to create a dropdown of options. 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.

I am using react select to create a dropdown of options. 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.

• javascript
• reactjs
• jsx
• react-select

Share Improve this question Follow asked Feb 25, 2020 at 15:49 Quddus GeorgeQuddus George 1,39222 gold badges1818 silver badges3333 bronze badges 2

• Oh, I see it is built into the onChange, thanks so much. In testing I see that it returns all the values associated with the input data, so it returned label, value, and change. – Quddus George Commented Feb 25, 2020 at 16:02
• 3 Fixed my previous ment: The default format for options are { label: 'somelabel', value: 'someValue' } . When an option is selected, then Select's onChange will return the chosen object, (ie { label, value, etc }). – SILENT Commented Feb 25, 2020 at 16:02

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

The React-Select onChange prop takes a method, and receives both the selected item(s), as well as the action being performed:

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.

I am using react select to create a dropdown of options. 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.

I am using react select to create a dropdown of options. 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.

• javascript
• reactjs
• jsx
• react-select

Share Improve this question Follow asked Feb 25, 2020 at 15:49 Quddus GeorgeQuddus George 1,39222 gold badges1818 silver badges3333 bronze badges 2

• Oh, I see it is built into the onChange, thanks so much. In testing I see that it returns all the values associated with the input data, so it returned label, value, and change. – Quddus George Commented Feb 25, 2020 at 16:02
• 3 Fixed my previous ment: The default format for options are { label: 'somelabel', value: 'someValue' } . When an option is selected, then Select's onChange will return the chosen object, (ie { label, value, etc }). – SILENT Commented Feb 25, 2020 at 16:02

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

The React-Select onChange prop takes a method, and receives both the selected item(s), as well as the action being performed:

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.

本文标签： javascriptWhat is the best way to get the selected value from a ReactSelect componentStack Overflow