ios - React Native 中输入文本的绑定(bind)值不允许我再写了

Question

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

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

    },

我想绑定(bind)这个输入文本值，因为当我执行上拉刷新时，我只想将文本设置为空字符串。

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

但问题是，使用此实现，每当我尝试输入文本输入时，它都不会输入任何内容。

我错过了什么？

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