[英]React Bootstrap Typeahead specifies the length of characters in the input field
First problem: Why, if I enter one letter in input, console.log (this.state.results.length)
does not show me 1
.第一个问题:为什么,如果我在 input 中输入一个字母,
console.log (this.state.results.length)
不会显示我1
。 Only after entering two letters console.log (this.state.results.length)
shows me 2
.只有在输入两个字母
console.log (this.state.results.length)
显示2
。
Second problem: I will type three letters, then remove two letters, console.log (this.state.results.length)
should show me 1
and show 2
.第二个问题:我将输入三个字母,然后删除两个字母,
console.log (this.state.results.length)
应该显示1
和显示2
。 The same is when I clear the input it should show 0
;同样是当我清除输入时它应该显示
0
;
Demo here: https://stackblitz.com/edit/react-frleaq演示在这里: 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>
);
}
}
You can use onInputChange
to handle text changes and you can keep the text in state.您可以使用
onInputChange
来处理文本更改,并且可以保持文本的状态。 This way you can check it's length and do whatever you want.这样你就可以检查它的长度并做任何你想做的事情。
Example:例子:
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;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.