如何從反應選擇中獲取 typescript 反應 js 中的選定值？

Question

我按照教程在我的 react js，typscript 項目中使用 react-select 下拉菜單。 我能夠使用下面的代碼，但我是反應 js 和 typescript 的新手。 我如何在下面的代碼中獲取選定項的值。 比如說，在 selectHandler function 中，我想比較選定的值

`
  if ( this.state.someValue == 'b") 
`

我收到一個錯誤，因為 this.state.someValue 不是字符串。 用戶選擇后如何提取值。

import * as React from "react";
import Select, {ValueType} from 'react-select';
 
interface SomeState { someValue: ValueType<{ value: string; label: string; }>; }
 
const opt = [{ value: 'a', label: 'awesome' }, { value: 'b', label: 'boring' }];
 
export class someClass extends React.Component<any, SomeState> {
 constructor(props: any) {
   super(props);
   this.state = { someValue: null}
 }
 
 public render(): JSX.Element {
  return ( <>
    <Select value={this.state.someValue} onChange={this.selectHandler} options={opt} />
  </> );}

 private selectHandler (selectedFromPlace: ValueType<{ value: string; label: string; }>): 
  void {
        this.setState({ someValue});
    };
}`

Answer 1

您的值是 object 類型，鍵label和value 。 僅從您選擇的選項中提取值。

在您的 select 處理程序中，您將獲得名為selectedFromPlace的選定選項。

因此，要僅獲取您需要執行的值selectedFromPlace.value