Question

我尝试在我的reactjs应用程序中使用react-select，但是onChange事件存在问题。 onChange应该发送两个参数。第一个应该是选定的值，但不是整个选定的值，而是整个选项项作为选定的值传递。

例如

我有一系列选项，例如options=[{ id: '1', name: 'A'},{ id: '2', name:'B'}]
我设置了getOptionValue = (i) => i.id;和getOptionLabel = (i)=>i.name;
选择第二项onChange(value)时，将第二个选项作为value参数（{id:'2',name:'B'}）而不是第二个选项（'2'）的值。 / li>

此行为与那里的大多数输入组件不一致。我希望onChange会传递项目的值，对于项目本身，我会期望另一个事件，例如onItemSelected或类似的东西。

此外，当我设置value={'2'}（受控组件）时，该组件不会显示所选项目。

我必须说我将AsyncSelect与loadOptions一起使用。

如何使它仅使用简单值而不是选项对象？

如果无法实现，则必须放弃对另一个类似组件的反应选择。

Answer 1

AFAIK当前无法通过值使React-Select在内部工作。我在应用程序中正在做的事情是实现一个层，以检索下降的对象，并提取上升的值。这样的事情（简化后，您可能需要根据应用程序进行更多的验证或处理）：

const Select extends Component {
  handleChange(newSelected) {
    // this.props.handleChange is your own function that handle changes
    // in the upper scope and receives only the value prop of the object
    // (to store in state, call a service, etc)
    this.props.handleChange(newSelected.value);
  }

  render() {
    // Assuming you get the simple value as a prop from your store/upper 
    // scope, so we need to retrieve the option object. You can do this in 
    // getDerivedStateFromProps or wherever it suits you best
    const { options, value } = this.props;
    const selectedOption = options.find(option => option.value === value)

    <ReactSelect
      options={options}
      value={selectedOption}
      onChange={this.handleChange}
      {...props}
    />
}

如何在react-select onChange事件和值属性中仅使用值？

1 个答案: