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

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

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显示结果？

1 个答案: