Commit b43082e9d229d78326206477eb6df1b85ef9fb07
1 parent
c8cadeda
1.处理手机端搜索不触发
Showing
1 changed file
with
21 additions
and
4 deletions
src/mobile/components/searchPicker.jsx
| @@ -2,8 +2,10 @@ import { Popup, SearchBar, PickerView, Button } from 'antd-mobile'; | @@ -2,8 +2,10 @@ import { Popup, SearchBar, PickerView, Button } from 'antd-mobile'; | ||
| 2 | import { List,} from 'antd-mobile-v2'; | 2 | import { List,} from 'antd-mobile-v2'; |
| 3 | import { useState, useMemo } from 'react'; | 3 | import { useState, useMemo } from 'react'; |
| 4 | import styles from "./selectInput.less"; | 4 | import styles from "./selectInput.less"; |
| 5 | +import iconSetting from '../../assets/mobile/setting.png'; | ||
| 6 | + | ||
| 5 | export default function SearchablePicker(props) { | 7 | export default function SearchablePicker(props) { |
| 6 | - const { onConfirm, initialValue, data, sTitle, onChange, value:newValue } = props; | 8 | + const { onConfirm, initialValue, data, sTitle, onChange, value:newValue, onVisibleChange } = props; |
| 7 | 9 | ||
| 8 | const [searchValue, setSearchValue] = useState(''); | 10 | const [searchValue, setSearchValue] = useState(''); |
| 9 | const [visible, setVisible] = useState(false) | 11 | const [visible, setVisible] = useState(false) |
| @@ -32,13 +34,30 @@ export default function SearchablePicker(props) { | @@ -32,13 +34,30 @@ export default function SearchablePicker(props) { | ||
| 32 | ); | 34 | ); |
| 33 | }, [searchValue, data]); // ✅ 必须包含 data | 35 | }, [searchValue, data]); // ✅ 必须包含 data |
| 34 | const label = filteredOptions?.find(x=>x.value === newValue[0])?.label || '' | 36 | const label = filteredOptions?.find(x=>x.value === newValue[0])?.label || '' |
| 37 | + | ||
| 38 | + const handleOpen = () => { | ||
| 39 | + setVisible(true); | ||
| 40 | + // 调用onVisibleChange回调 | ||
| 41 | + if (onVisibleChange) { | ||
| 42 | + onVisibleChange(true); | ||
| 43 | + } | ||
| 44 | + }; | ||
| 45 | + | ||
| 35 | const handleConfirm = () => { | 46 | const handleConfirm = () => { |
| 36 | onChange(values); | 47 | onChange(values); |
| 37 | setVisible(false); | 48 | setVisible(false); |
| 49 | + // 调用onVisibleChange回调 | ||
| 50 | + if (onVisibleChange) { | ||
| 51 | + onVisibleChange(false); | ||
| 52 | + } | ||
| 38 | }; | 53 | }; |
| 39 | 54 | ||
| 40 | const handleCancel = () => { | 55 | const handleCancel = () => { |
| 41 | setVisible(false); | 56 | setVisible(false); |
| 57 | + // 调用onVisibleChange回调 | ||
| 58 | + if (onVisibleChange) { | ||
| 59 | + onVisibleChange(false); | ||
| 60 | + } | ||
| 42 | }; | 61 | }; |
| 43 | 62 | ||
| 44 | const changeOption = (val) => { | 63 | const changeOption = (val) => { |
| @@ -47,9 +66,7 @@ export default function SearchablePicker(props) { | @@ -47,9 +66,7 @@ export default function SearchablePicker(props) { | ||
| 47 | 66 | ||
| 48 | return ( | 67 | return ( |
| 49 | <div> | 68 | <div> |
| 50 | - <List.Item arrow="horizontal" className={styles.searchPickerList} onClick={() => { | ||
| 51 | - setVisible(true) | ||
| 52 | - }} extra={label}> | 69 | + <List.Item arrow="horizontal" className={styles.searchPickerList} onClick={handleOpen} extra={label}> |
| 53 | {props.iconSettingShow ? | 70 | {props.iconSettingShow ? |
| 54 | // eslint-disable-next-line jsx-a11y/alt-text | 71 | // eslint-disable-next-line jsx-a11y/alt-text |
| 55 | <img src={iconSetting} style={{ verticalAlign: 'sub', marginRight: '15px' }} alt="" /> : ''} | 72 | <img src={iconSetting} style={{ verticalAlign: 'sub', marginRight: '15px' }} alt="" /> : ''} |