无法在 react-select 下拉列表中传递标签

Question

我无法在 onChange 事件处理程序中传递标签值。只有价值正在形成。我想访问标签。做同样的帮助。

handleSelectChange 函数只能访问值，不能访问 select 下拉菜单的标签或事件。

            <Select name={this.props.name}
                backspaceToRemoveMessage=""
                closeOnSelect={!this.state.stayOpen}
                searchable={false}
                disabled={this.state.disabled}
                multi
                options={this.props.countries}
                simpleValue={true}
                value={this.state.value}
                onChange ={this.handleSelectChange}
            />

Answer 1

这是因为 flag simpleValue=true 将处理程序参数解析为值字符串。将此标志设置为 false，您的 handleSelectChange 将有权访问所选对象的数组。比您必须手动生成您的价值。（例如 value="one,two"）

值处理示例：

handleSelectChange = (val) => {
  const value = val.map(item => item.value);
    this.setState({
      value
  });
}

Answer 2

您可以在 updateState 中抓取在下面示例中选择的元素。

例子

import React from "react";
import Select from 'react-select';

export default class CoolExample extends React.Component {
  constructor(props) {
     super(props);
     this.state = {value:"foo"};
   }

  updateState(element) {
        this.setState({value: element}); 
  }

  render(){
     var Select = require('react-select'); 
     var options = [
         { value: 'foo', label: 'Foo' },
         { value: 'bar', label: 'Bar' }
     ];

     return(

      <Select
        name="form-field-name"
        value={this.state.value}
        options={options}
        onChange={this.updateState.bind(this)}
      />
   );
  }
}

无法在 react-select 下拉列表中传递标签

Unable to pass label in react-select dropdown

reactjs

react-select