CODEWITHSUNDEEP
iosreactjsinputreact-native
msqar
msqar

Reputation: 3040

Binding value on input text in react native doesn't let me write anymore

I got the following input text on a Child Component:

 <Input 
     placeholder={ i18n.t('searchSomeone') }
     value={ this.props.searchText }
     onChangeText={ this.props.onSearch }
     defaultValue={''}/>

This is the way , I'm passing the variable and onChangeText handler:

<ChildComponent 
         onSearch={ this._onSearch }
         searchText={ this.state.searchText }>
</ChildComponent>

And this is the _onSearch() function:

componentWillMount: function() {

        this._onSearch = _.debounce((text) => {
            this.setState({ refreshing : true }, () => {
                if(text.length === 0) {
                    this.setState({ filteredSearch: false }, () => {
                        this.getAllReports();
                    })
                }else{
                    this.setState({
                        page: 1,
                        refreshing: true,
                        reports: [],
                        filteredSearch: true
                    }, () => {
                        this.getReportsBySearchString();
                    })
                }
            })
        }, 1000);

    },

I wanted to bind this input text value, because when I do a pull up to refresh, i just want to set the text to empty string.

_onRefresh: function() {
    this.setState({
        filteredSearch: false,
        searchText: ''
    }, () => {
        this.getAllReports();
    })
},

But the problem is that with this implementation, whenever I try to type in the text input, it doesn't type anything.

What am I missing?

Upvotes: 1

Views: 520

Answers (1)

QoP
QoP

Reputation: 28397

It looks like you are not saving the input value in this.state.searchText. That's the reason why the input value is always ''.

this._onSearch = _.debounce((text) => {
        this.setState({ 
            refreshing : true,
            searchText: text // <-- Here
        }, () => {
            if(text.length === 0) {
                this.setState({ filteredSearch: false }, () => {
                    this.getAllReports();
                })
            }else{
                this.setState({
                    page: 1,
                    refreshing: true,
                    reports: [],
                    filteredSearch: true
                }, () => {
                    this.getReportsBySearchString();
                })
            }
        })
}, 1000);

Edit

You can try debounce the callback function you are passing to setState, it is not tested so I'm not sure if it is going to work.

It should be something like this

this._onSearch = (text) => {
            this.setState({ 
                refreshing : true,
                searchText: text
            }, this._callback)

this._callback = _.debounce(() => {
    const text = this.state.searchText;
    if(text.length === 0) {
                  ...
    }
}, 1000);

Upvotes: 1

Related Questions