react native stateによる再描画。

js
1  handleChange = (search) => this.setState({search},this.handleSearch)
2
3  handleSearch = () => {
4    this.setState({searchReference:'1'})
5    const self = this
6    firebase.database().ref('/users/').orderByChild('user').startAt(self.state.search).endAt(self.state.search + "\uf8ff").once("value",function(snapshot) {
7      const search_users =[]
8      snapshot.forEach(function(childSnapshot) {
9          search_users.push(childSnapshot.val())
10        })
11      self.setState({
12        search_users:search_users,
13      })
14    })
15  }

js
1{
2            (this.searchReference==='1')
3            ?<Content><Text>true</Text></Content>
4            :<Content><Text>false</Text></Content>
5}

このようにreactjsでは完全に再描画されるはずのコードなのですが、なぜかこれではうまくいきません。なぜでしょう。
handleChangeのsetStateでのコールバックとしてhandleSearchしているのは、TextInputのpropsをいじって、onEndEditingやonBlurなどを使用して見たのですが、再描画されずに困ってしまってやってしまっているだけなので、突っ込まないでください。

ちなみに、TextInputでテキストの変更が終了した時に、handleSearchを呼び出すなら、```
onEndEditing={this.handleSearch}

ですよね？

行動規範の内容に同意します

回答1件

ベストアンサー

やりたいことは「 TextInput の中身が変更されたら検索処理を走らせる」ですよね ?

単純に onChange / onChangeText で変更を拾って debounce などで適切にイベント発行するという方法がよいかもしれません

http://blog.revathskumar.com/2016/02/reactjs-using-debounce-in-react-components.html

onEndEditing については使ったこと無いのですなんとも言えないのですが、同様の目的なら onBlur を使ったほうが良さそうな意見を見つけました

https://stackoverflow.com/questions/34053315/difference-between-onendediting-and-onblur/40851395#40851395

投稿2018/01/30 03:12

januswel

総合スコア301

MOTOMUR

2018/01/30 04:53

申し訳ないですが、onBlurについてお聞きしたいのですが、 onBlur={this.handleSearch} handleSearch = () => { this.setState({searchReference:'1'}) const self = this firebase.database().ref('/users/').orderByChild('user').startAt(self.state.search).endAt(self.state.search + "\uf8ff").once("value",function(snapshot) { const search_users =[] snapshot.forEach(function(childSnapshot) { search_users.push(childSnapshot.val()) }) self.setState({ search_users:search_users, }) }) } このようにしようしても、（onBlur内でarrowにしても）この関数処理を行ってはくれないのですが、syntaxが間違ってますでしょうか？ボタンを追加で実装して、onPress{ this.handleSearch}とした場合は検索できます。