如何使用 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>);
  }
}

如何使用 onBlur 显示结果？

How do I display results using onBlur?

javascript

onblur

reactjs