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

第一个问题：为什么，如果我在输入中输入一个字母，

console.log（this.state.results.length）

不会显示

1

。仅在输入两个字母后

console.log（this.state.results.length）

显示

2

第二个问题：我将键入三个字母，然后删除两个字母，

console.log（this.state.results.length）

应该显示

1

和

2

。同样，当我清除输入时，它应该显示

0

此处演示：

类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
结果：“”
};
}
_handleSearch=查询=>{
这是我的国家({
结果：查询
})
}
render（）{
log（this.state.results.length）
返回(
);
}
}

您可以使用

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;

从“React”导入React；
从“react bootstrap typeahead”导入{AsyncTypeahead}；
导入“bootstrap/dist/css/bootstrap.css”；
导入“react bootstrap typeahead/css/typeahead.css”；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
孤岛加载：false，
多重：对，
选项：[]，
选定用户：[]，
当前输入：“
};
}
handleSearch=查询=>{
this.setState（{isLoading:true}）；
取回(
`https://api.github.com/search/users?q=${query}+in:login&page=1&per_page=3`
)
.then（resp=>resp.json（））
。然后（{items}）=>{
const options=items.map（i=>({
id:i.id，
姓名：i.login
}));
返回{options}；
})
。然后（{options}）=>{
这是我的国家({
孤岛加载：false，
选择权
});
});
};
handleChange=selectedItems=>{
这是我的国家({
selectedUsers:selectedItems，
当前输入：“
});
};
handleInputChange=输入=>{
这是我的国家({
电流输入：输入
});
};
render（）{
const{selectedUsers，isLoading，options，currentInput}=this.state；
返回(
this.handleSearch（查询）}
onChange={selectedItems=>this.handleChange（selectedItems）}
onInputChange={input=>this.handleInputChange（input）}
占位符=“搜索用户”
/>







{currentInput.length>0&&MY按钮}

所选{selectedUsers.length}用户：


{selectedUsers.map（用户=>(
{user.name}
))}

);
}
}
导出默认应用程序；

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

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;