无法选择和删除的项目不会返回到 typeahead react-bootstrap 中的列表答案

【问题标题】：Cannot be selected and deleted items do not return to the list in typeahead react-bootstrap无法选择和删除的项目不会返回到 typeahead react-bootstrap 中的列表
【发布时间】：2019-09-12 12:47:02
【问题描述】：

我们将this.state.todos 放入option。 this.state.todos.slice (0.2) 我输入了selected。但是，我无法选择项目并且已删除的项目不会返回到列表中。我正在使用 typeahead react bootstrap 库

在这里演示：https://stackblitz.com/edit/react-agfvwn?file=index.js

class App extends Component {
  constructor() {
    super();
    this.state = {
      todos: [{
        id:1,
        name: 'paul'
      },
      {
        id:2,
        name: 'gregor'
      },
      {
        id:3,
        name: 'martin'
      }],
    };
  }

  handleSelect = (statusFilter) => {
    console.log(statusFilter)

    this.setState({
      todos: statusFilter
    })   
  }



  render() {

    return (
      <div>
        <Typeahead
          multiple
          id={'sasas'}
          selected={this.state.todos.slice(0,2)}
          labelKey="name"
          onChange={this.handleSelect}
          options={this.state.todos}
          ref={(ref) => this._typeahead = ref}
        />
      </div>
    );
  }
}

【问题讨论】：

标签： javascript reactjs typeahead.js bootstrap-typeahead

【解决方案1】：

这就是你要找的：你需要另一个数组来存储你的选项，你可以用它来检索你的选项：

    import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
import {Typeahead} from 'react-bootstrap-typeahead';


class App extends Component {
  constructor() {
    super();
    this.state = {
      todos:[
        {
        id:1,
        name: 'paul'
      },
      {
        id:2,
        name: 'gregor'
      },
      ],
      list: [{
        id:1,
        name: 'paul'
      },
      {
        id:2,
        name: 'gregor'
      },
      {
        id:3,
        name: 'martin'
      }],
    };
  }

  handleSelect = (statusFilter) => {
    console.log(statusFilter)

    this.setState({
      todos: statusFilter
    })   
  }



  render() {

    return (
      <div>
        <Typeahead
          multiple
          id={'sasas'}
          selected={this.state.todos}
          labelKey="name"
          onChange={this.handleSelect}
          options={this.state.list}
          ref={(ref) => this._typeahead = ref}
        />
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

【讨论】：