React input onChange方法在第一个字符后搜索术语

Question

我是React的新手，在搜索栏的输入上打字时遇到了搜索问题。问题是，当在搜索栏上键入一个术语时，它会触发第一个字符后面的值，比如说我想搜索以"开头的单词；f"；但是当我键入"；f"；它不会触发值"0"；f"；一开始所以你必须键入另一个"；f"；从而触发。

这是我的代码：

import React from "react";
import { SearchBar } from "./SearchBar";
export default class App extends React.Component {
state = { result: [] };
onTermSearched = (term) => {
console.log(term);
// Term is searched from the records Api and returns the list.
//   const response = await elastic.get('/records', {
//     params: {
//         q: term,
//     },
// })
// this.setState({ result: response.data })
};
render() {
return (
<div className="ui container">
<SearchBar onInputChange={this.onTermSearched} />
</div>
);
}
}
export class SearchBar extends React.Component {
state = { term: '' }
onInputChange = (event) => {
event.preventDefault()
this.setState({ term: event.target.value })
this.props.onInputChange(this.state.term)
}
render() {
return (
<div className="search-bar">
<div className="ui form">
<div className="field">
<input
type="text"
value={this.state.term}
onChange={this.onInputChange}
/>
</div>
</div>
</div>
)
}
}

代码沙箱

打字时请检查控制台。你会理解我的问题的。

Answer 1

尝试使用setState第二个参数，这是一个可选的回调函数，将在setState完成时执行，如下所示：

this.setState({ term: event.target.value }, ()=> {
this.props.onInputChange(this.state.term)
})

Answer 2

这将同时更新您的学期状态和onInputChange道具。

onInputChange = (event) => {
event.preventDefault();
this.setState((state, props) => {
props.onInputChange(event.target.value);
return { term: event.target.value };
});  
};