antd穿梭框Transfer关闭后怎么清楚其中的搜索字段

Question

点击按钮，打开Transfer遮罩层，输入搜索字段得到相应数据，操作完以后关闭遮罩层，再次打开遮罩层，上次的搜索字还在，怎么清空啊？文档里没看到这方面的api，只有一个showSearch

Answer 1

Answer 2

每次给一个新的key试试

Answer 3

这其实是设计上的一个关于用户体验的优化，一般来说，搜索框中会缓存上次的搜索条件。如果你实在不想要这个优化，因为antd官方没有暴露重置搜索框的接口，你可以为Transfer组件设定ref:

render() {
    return (
      <Transfer
        ref = {(transfer)=> {this.transfer = transfer;}}
        dataSource={this.state.mockData}
        showSearch
        filterOption={this.filterOption}
        targetKeys={this.state.targetKeys}
        onChange={this.handleChange}
        render={item => item.title}
      />
    );
  }

然后在使用Transfer的组件中，通过this.transfer.getElementsByTagName()(也可能是调用其他的getElement方法，具体可以通过查看Transfer最终转换成的DOM结构)获取搜索框DOM，然后直接在DOM上操作，清除之前的数据。

Answer 4

感谢@艾特老干部 提供的思路。我补充一下具体的代码：

this.transfer.state.leftFilter = '';
this.transfer.state.rightFilter = '';

Answer 5

直接将 transfer 的targetKeys 重置为空数组即可