反馈原生的输入文本的绑定值不允许我再写

时间:2017-05-19 21:12:32

标签: ios reactjs input react-native

我在子组件上得到以下输入文本:

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

这就是我传递变量和onChangeText处理程序的方式:

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

这是_onSearch()函数:

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);

    },

我想绑定此输入文本值,因为当我执行pull up to refresh时,我只想将文本设置为空字符串。

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

但问题是,通过这种实现,每当我尝试输入文本输入时,它都不会输入任何内容。

我错过了什么?

1 个答案:

答案 0 :(得分:1)

看起来您没有在this.state.searchText中保存输入值。这就是输入值始终为''的原因。

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);

修改

你可以尝试去掉你传递给setState的回调函数,它没有经过测试,所以我不确定它是否会起作用。

它应该是这样的

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

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