|
@@ -16,10 +16,10 @@ class SearchBox extends React.Component {
|
|
|
constructor(props) {
|
|
|
super(props);
|
|
|
this.state = {
|
|
|
- showBox:false, //显示搜索结果
|
|
|
- border:'',
|
|
|
- showClear:false, //显示清空icon
|
|
|
- timer:null,
|
|
|
+ showBox:false, //显示搜索结果
|
|
|
+ border:'',
|
|
|
+ showClear:false, //显示清空icon
|
|
|
+ timer:null
|
|
|
}
|
|
|
this.textInput = React.createRef();
|
|
|
this.handleClearVal = this.handleClearVal.bind(this);
|
|
@@ -27,13 +27,14 @@ class SearchBox extends React.Component {
|
|
|
this.handleBlur = this.handleBlur.bind(this);
|
|
|
this.clickIcon = this.clickIcon.bind(this);
|
|
|
this.handleSearchSelect = this.handleSearchSelect.bind(this);
|
|
|
+ this.reset = this.reset.bind(this);
|
|
|
}
|
|
|
handleClearVal(){
|
|
|
const { clearSearch } = this.props;
|
|
|
this.textInput.current.value = '';
|
|
|
this.textInput.current.focus();
|
|
|
this.setState({
|
|
|
- showClear:false
|
|
|
+ showClear:false
|
|
|
});
|
|
|
clearSearch&&clearSearch();
|
|
|
}
|
|
@@ -41,11 +42,8 @@ class SearchBox extends React.Component {
|
|
|
e.stopPropagation();
|
|
|
e.preventDefault();
|
|
|
const {cliIndex,chooseSearch,clearSearch,onSelect} = this.props;
|
|
|
+ chooseSearch&&chooseSearch({item:item,index:cliIndex});
|
|
|
onSelect();//上一级的“确定”事件
|
|
|
- setTimeout(()=>{
|
|
|
- chooseSearch&&chooseSearch({item:item,index:cliIndex})
|
|
|
- },200)
|
|
|
-
|
|
|
clearSearch&&clearSearch();
|
|
|
this.textInput.current.value = "";
|
|
|
}
|
|
@@ -87,17 +85,25 @@ class SearchBox extends React.Component {
|
|
|
this.textInput.current.focus();
|
|
|
},0)
|
|
|
}
|
|
|
+ // 重置事件
|
|
|
+ reset(){
|
|
|
+ const { clearSearch } = this.props;
|
|
|
+ clearSearch();
|
|
|
+ this.textInput.current.value = "";
|
|
|
+ this.setState({
|
|
|
+ showBox:false,
|
|
|
+ border:false,
|
|
|
+ showClear:false
|
|
|
+ })
|
|
|
+ }
|
|
|
+ componentDidMount(){
|
|
|
+ this.props.onRef(this);
|
|
|
+ }
|
|
|
componentWillReceiveProps(next){
|
|
|
// 隐藏时,清空搜索框内文字,清空搜索结果,隐藏搜索框
|
|
|
const { clearSearch } = this.props;
|
|
|
if(!next.show && next.show != this.props.show){
|
|
|
- clearSearch();
|
|
|
- this.textInput.current.value = "";
|
|
|
- this.setState({
|
|
|
- showBox:false,
|
|
|
- border:false,
|
|
|
- showClear:false
|
|
|
- })
|
|
|
+ this.reset();
|
|
|
}
|
|
|
}
|
|
|
render() {
|