无法删除Typeahead react-bootstrap中的输入内容

时间:2019-09-11 22:29:55

标签: javascript reactjs typeahead.js bootstrap-typeahead

尝试通过按Backspace删除输入字段的内容。但是,不能删除任何内容。当我删除onChange = {this.handleSelectContractor}时,该字段可以清除,但添加onChange = {this.handleSelectContractor}后则无法执行任何操作。 将选定的todo传递到handleSelect并将其分配给变量selected。变量selected应该出现在输入字段中

此处演示:https://stackblitz.com/edit/react-agfvwn?file=index.js

class App extends Component {
  constructor() {
    super();
    this.state = {
      todos: [],
      selected: [],
      todo: {},
      todo2: 'ddd'
    };
  }

  componentDidMount() {
    this.getTodos().then(() => {
      const todo = this.state.todos.find(todo => todo.id === 4);
      this.setState({
        selected: todo ? [todo] : []
      })
    })

  }

  getTodos = () => {
    return axios({
      url: 'https://jsonplaceholder.typicode.com/todos',
      method: "GET"
    })
    .then(res => { 
      this.setState({
        todos: res.data
      });
    })
    .catch(error => {
      console.log(error);
    }) 
  }

  handleSelect = (todo) => {
    let newArray = [...this.state.selected];
    newArray.push(todo)
    if(todo) {
      this.setState({
        todo: newArray
      }) 
    } else {
      this.setState({
        todo2: ''
      })
    }
  }

  render() {
    console.log(this.state.todo)
    return (
      <div>
        <Typeahead
          id={'sasas'}
          selected={this.state.selected}
          labelKey="title"
          onChange={this.handleSelect}
          options={this.state.todos}
          ref={(ref) => this._typeahead = ref}
        />
      </div>
    );
  }

0 个答案:

没有答案