如何使用 onBlur 显示结果？答案

【问题标题】：How do I display results using onBlur?如何使用 onBlur 显示结果？
【发布时间】：2018-12-10 00:57:30
【问题描述】：

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

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

在我的 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 函数还是我的渲染函数中？

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

【问题讨论】：

标签： javascript reactjs onblur

【解决方案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>);
  }
}

【讨论】：