如何使用onBlur显示结果？-Java 学习之路

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

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

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

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

1 回答

理想情况下，您应该只是使用结果设置组件的状态，并让反应将更新的结果呈现到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>);
  }
}

回复于 2024-04-27T05:28:27+08:00

如何使用onBlur显示结果？

1 回答

相关问题