如何使用react-select-plus获取突出显示的项目的值?

时间:2018-08-24 10:06:05

标签: javascript reactjs react-select

我正在使用react-select-plus,并且试图通过键盘在突出显示的项目之间进行导航时获得该值,

我怎么做这项工作?

这是我的代码示例:

class App extends Component {
  constructor() {
    super(); 
  }

  loadOptions(input, callback) {
    setTimeout(() => {
      callback(null, {
        options: [
          { value: 'one', label: 'One' },
          { value: 'two', label: 'Two' }
        ], 
        complete: true
      });
    }, 500);
  };

  render() {
    return (
      <div>
        <Async 
          loadOptions={this.loadOptions}  
        />
      </div>
    );
  }
}

希望你能帮助我

1 个答案:

答案 0 :(得分:1)

我终于找到了如何获得当前突出显示的项目:

class App extends Component {
  constructor() {
    super(); 
  }

  keyUp() {
    let item = ReactDOM.findDOMNode(document.getElementsByClassName('Select-option is-focused')[0]);
    console.log(item.textContent);
  }

  loadOptions(input, callback) {
    setTimeout(() => {
      callback(null, {
        options: [
          { value: 'one', label: 'One' },
          { value: 'two', label: 'Two' }
        ], 
        complete: true
      });
    }, 500);
  };

  render() {
    return (
      <div tabIndex="0" onKeyUp={this.keyUp.bind(this)}>
        <Async 
          loadOptions={this.loadOptions}  
        />
      </div>
    );
  }
}