Как отобразить результаты с помощью onBlur? - PullRequest
Новая
       22

Как отобразить результаты с помощью onBlur?

0 голосов
/ 10 декабря 2018

Поэтому я пытаюсь создать форму поиска, чтобы при потере фокуса она использовала другую функцию для поиска чего-либо и отображения результатов.

Поэтому, когда я набираю слово, после нажатияв другом месте он будет отображать результаты.

В моем jsx-файле у меня есть функция рендеринга и функция размытия. 

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

Так что я могу очень хорошо добраться до своей функции onBlur, поскольку смогпросто добавить console.log ("hello world") в мою функцию onBlur, и это сработало.Но как бы я рендерил больше строк HTML только тогда, когда потерял фокус, например, это проявилось бы только тогда, когда я потерял фокус: 

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

Будет ли это помещено в onBlurфункция или моя функция рендеринга?

Если бы это была функция рендера, понадобился бы какой-нибудь условный оператор?

1 Ответ

0 голосов
/ 10 декабря 2018

В идеале, вы должны просто установить состояние вашего компонента вместе с результатами и позволить реагировать, чтобы отобразить обновленные результаты в 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>);
  }
}
...