React Bootstrap Typeahead 指定输入字段中的字符长度答案

【问题标题】：React Bootstrap Typeahead specifies the length of characters in the input fieldReact Bootstrap Typeahead 指定输入字段中的字符长度
【发布时间】：2019-12-07 15:28:06
【问题描述】：

第一个问题：为什么，如果我在输入中输入一个字母，console.log (this.state.results.length) 不会显示1。只有在输入两个字母console.log (this.state.results.length) 后才会显示2。

第二个问题：我将输入三个字母，然后删除两个字母，console.log (this.state.results.length) 应该显示1 和显示2。同样是当我清除输入时它应该显示0;

在这里演示：https://stackblitz.com/edit/react-frleaq

class App extends Component {
  constructor() {
    super();
    this.state = {
      results: ''
    };
  }

_handleSearch = query => {
  this.setState({
    results: query
  })
}


  render() {
    console.log(this.state.results.length)
    return (
      <div>
         <AsyncTypeahead
            clearButton
            id="basic-example"
            labelKey="name"
            onSearch={this._handleSearch}
          />
      </div>
    );
  }
}

【问题讨论】：

Demo和问题中的代码不同。
@SuleymanSah 我更正了
除此之外，您真正想要什么？你想让 AsyncTypeahead 工作吗？
@SuleymanSah 我想检查输入 AsyncTypeahead 中输入的字符长度
但是为什么呢？有关系吗？你会用它做什么？

标签： javascript reactjs typeahead.js react-bootstrap-typeahead

【解决方案1】：

您可以使用onInputChange 处理文本更改，并且可以保持文本处于状态。这样你就可以检查它的长度并做任何你想做的事情。

例子：

import React from "react";

import { AsyncTypeahead } from "react-bootstrap-typeahead";
import "bootstrap/dist/css/bootstrap.css";
import "react-bootstrap-typeahead/css/Typeahead.css";

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      isLoading: false,
      multiple: true,
      options: [],
      selectedUsers: [],
      currentInput: ""
    };
  }

  handleSearch = query => {
    this.setState({ isLoading: true });
    fetch(
      `https://api.github.com/search/users?q=${query}+in:login&page=1&per_page=3`
    )
      .then(resp => resp.json())
      .then(({ items }) => {
        const options = items.map(i => ({
          id: i.id,
          name: i.login
        }));
        return { options };
      })
      .then(({ options }) => {
        this.setState({
          isLoading: false,
          options
        });
      });
  };

  handleChange = selectedItems => {
    this.setState({
      selectedUsers: selectedItems,
      currentInput: ""
    });
  };

  handleInputChange = input => {
    this.setState({
      currentInput: input
    });
  };

  render() {
    const { selectedUsers, isLoading, options, currentInput } = this.state;

    return (
      <div>
        <AsyncTypeahead
          clearButton
          id="basic-example"
          isLoading={isLoading}
          options={options}
          minLength={3}
          multiple
          labelKey="name"
          onSearch={query => this.handleSearch(query)}
          onChange={selectedItems => this.handleChange(selectedItems)}
          onInputChange={input => this.handleInputChange(input)}
          placeholder="Search for users"
        />
        <hr />
        <br/>
        <br/>
        <br/>
        {currentInput.length > 0 && <button>MY BUTTON</button>}
        <hr />
        Selected {selectedUsers.length} Users: <br />
        <ul>
          {selectedUsers.map(user => (
            <li key={user.id}>{user.name}</li>
          ))}
        </ul>
      </div>
    );
  }
}

export default App;

【讨论】：