如何仅使用 react-select onChange 事件和 value 道具中的值? [英] How can I work with just values in react-select onChange event and value prop?

问题描述

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

I try to use react-select in my reactjs app, but I have a problem with the onChange event. onChange is supposed to send two arguments. The first is supposed to be the selected value, but instead of the selected value, the whole option item is passed as the selected value.

例如

• 我有一系列选项，例如 options=[{ id: '1', name: 'A'},{ id: '2', name:'B'}]
• 我设置了 getOptionValue = (i) =>i.id; 和 getOptionLabel = (i)=>i.name;
• When select the second item onChange(value) is passed the second option as the value argument ({id:'2',name:'B'}) 而不是第二个选项的值 ('2').

• I have an array of option items like options=[{ id: '1', name: 'A'},{ id: '2', name:'B'}]
• I set getOptionValue = (i) => i.id; and getOptionLabel = (i)=>i.name;
• When select the second item onChange(value) is passed the second option as the value argument ({id:'2',name:'B'}) instead of the value of the second option ('2').

这种行为与大多数输入组件不一致.我希望 onChange 被传递项目的值，而对于项目本身，我希望另一个事件像 onItemSelected 或类似的东西.

This behavior is inconsistent with most input components out there. I would expect onChange to be passed the value of the item, and for the item itself I would expect another event like onItemSelected or something like that.

此外，当我设置 value={'2'}(受控组件)时，该组件不显示所选项目.

Also, when I set value={'2'} (controlled component), the component doesn't show the selected item.

我必须说我将 AsyncSelect 与 loadOptions 结合使用.

I must say that I use AsyncSelect with loadOptions.

如何让它只使用简单的值而不是选项对象?

How can I make it work with just simple values, instead of option objects?

如果这不能发生，我必须放弃对另一个类似组件的 react-select.

If this can't happen I have to abandon react-select for another similar component.

推荐答案

AFAIK 目前没有办法让 React-Select 仅使用值在内部工作.我在我的应用程序中所做的是实现一个层来检索下降的对象，并提取上升的值.像这样的事情(这是简化的，您可能需要更多的验证或处理，具体取决于您的应用程序):

AFAIK currently there's no way to make React-Select work internally with just the value. What I'm doing in my application is implementing a layer to retrieve the object going down, and extract the value going up. Something like this (this is simplified, you may need more validation or handling depending on your application):

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 事件和 value 道具中的值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！