问题遇到的现象和发生背景
有一個功能,當用戶輸入文字可以自動給建議的選項
问题相关代码,请勿粘贴截图 _
我的代碼如下
import React, { useState, useEffect } from 'react';
import Autosuggest from 'react-autosuggest';
import PropType from 'prop-types';
import { GlobalConstants } from '../../Utilities/CommonUtility';
import { usePostAuth, useLazyLoading } from '../../CustomHook/CustomHook';
const getSuggestionValue = suggestion => suggestion;
const HospitalCodeAutosuggest = (props) => {
const [autoSuggestValue, setAutoSuggestValue] = useState({
value: "",
suggestions: [],
});
// Post With Auth Function
const { PostWithAuth } = usePostAuth();
useEffect(() => {
if (props.value != null) {
setAutoSuggestValue(prev => {
return {
...prev,
value: props.value
}
});
}
}, [props.value]
)
// Teach Autosuggest how to calculate suggestions for any given input value.
const getSuggestions = (value) => {
PostWithAuth({
url: "/User/GetHospitalCodeLazy",
data: {
code: value,
"FuncCode": GlobalConstants.FuncCode.ViewWebsite,
"AuthCode": 1
},
success: (response) => {
if (response.Data == null || response.Data.length == 0) return;
setAutoSuggestValue(prev => {
return {
...prev,
suggestions: prev.suggestions.concat(response.Data)
};
});
}
});
};
const onChange = (event, { newValue }) => {
setAutoSuggestValue(prev => {
return {
...prev,
value: newValue
};
});
let fakeEvent = Object.assign({}, event);
fakeEvent.target.name = props.name;
fakeEvent.target.value = newValue;
props.handleOnChange(fakeEvent);
};
// Autosuggest will call this function every time you need to update suggestions.
// You already implemented this logic above, so just use it.
const onSuggestionsFetchRequested = ({ value }) => {
getSuggestions(value);
// onSuggestionsClearRequested();
};
// Autosuggest will call this function every time you need to clear suggestions.
const onSuggestionsClearRequested = () => {
setAutoSuggestValue(prev => {
return {
...prev,
suggestions: []
};
});
};
const inputProps = {
value: autoSuggestValue.value,
onChange: onChange,
name: props.name,
};
const onSuggestionSelected = (event, { suggestion, suggestionValue, index, method }) => {
event.preventDefault();
console.log('ping... ', suggestion)
}
// Use your imagination to render suggestions.
const renderSuggestion = suggestion => (
<div>
{suggestion.HospitalCode}<br />
{suggestion.HospitalName}
</div>
);
return (
<div style={{ width: "100%" }}>
<div className={"input-item edit"}>
<Autosuggest
suggestions={autoSuggestValue.suggestions}
onSuggestionsFetchRequested={onSuggestionsFetchRequested}
onSuggestionsClearRequested={onSuggestionsClearRequested}
getSuggestionValue={getSuggestionValue}
renderSuggestion={renderSuggestion}
focusInputOnSuggestionClick={false}
inputProps={inputProps}
onSuggestionSelected={onSuggestionSelected}
/>
</div>
</div>
);
}
HospitalCodeAutosuggest.defaultProps = {
style: {},
handleOnChange: () => { }
}
HospitalCodeAutosuggest.propTypes = {
handleOnChange: PropType.func,
name: PropType.string,
value: PropType.string,
handleSuggestionSelected: PropType.func,
style: PropType.object
};
export default HospitalCodeAutosuggest;
运行结果及报错内容
當是輸入中文(注音拼音)還沒有按下enter,建議的內容就會出現,但是如果用滑鼠點擊選項,輸入框不會將所選到的值帶入input框
我想要达到的结果
我希望可以點選完後將值帶入input框