javascript - 如何使用 onBlur 显示结果？

Question

所以我试图制作一个搜索表单，当它失去焦点时，它将使用另一个函数来搜索某些内容并显示结果。

所以当我输入一个单词时，我点击其他地方后，它就会显示结果。

在我的 jsx 文件中，我有渲染函数和模糊函数。

render(){
     return <form>
             <span className = "name"> Search Term: </span>
             <input id = "search-term" value = {this.state.value} onBlur = {this.onBlur} </input> 
          </form>
}

所以我可以很好地访问我的 onBlur 函数，因为我可以在 onBlur 函数中添加一个 console.log("hello world") 并且它有效。但是，如何仅在失去焦点时渲染更多行 HTML，例如，只有在失去焦点时才会显示:

<div>
    <div class = "result">
         [data or whatever the result is]
   </div>

这会被放入 onBlur 函数还是我的渲染函数中吗？

如果是渲染函数，我需要某种条件语句吗？

Answer 1

理想情况下，您应该简单地使用结果设置组件的状态，然后让 React 将更新的结果渲染到 div 中。这是一个例子:

class ExampleComponent extends React.Component {
  onBlur = async () => {
    const results = await axios.get('myhttpendpoint');

    this.setState({
      results
    });
  }
  render(){
    return (
      <div>
        <form>
          <span className = "name"> Search Term: </span>
          <input id="search-term" value={this.state.value} onBlur={this.onBlur} />
        </form>
        <div id="results">
          {this.state.results}
        </div>
      </div>);
  }
}