如何解决反应自动完成值问题
因此,自动完成工作会显示不同国家/地区的选项以及它们的标记图标,也可以将数据保存到数据库中,问题是我想在编辑模式下显示值时 除了我从autoComplete中删除“ getOptionLabel”之外,其他人也想向其值添加标志Icon
<Autocomplete
/*value={values.country+
<Avatar
style={{ height: 42,width: 42 }}
src={`data:image/jpeg;base64,${values.flag}`}
></Avatar>}*/
name="country"
options={countryData}
getOptionLabel={option => option.listDescription}
onChange={(e,value) => {
setFieldValue(
'country',value !== null ? value.listDescription : 'country'
);
setFieldValue('region',value !== null ? value.region : 'region');
setFieldValue('flag',value !== null ? value.image.data : 'flag');
//console.log( value.image.data)
}}
renderInput={params => (
<TextField
{...params}
error={Boolean(touched.country && errors.country)}
helperText={touched.country && errors.country}
name="country"
label="Select Country"
variant="outlined"
onChange={(e,value) => setFieldValue('country',value)}
onBlur={() => setFieldTouched('country',true)}
fullWidth
value={values.country+
<Avatar
style={{ height: 42,width: 42 }}
src={`data:image/jpeg;base64,${values.flag}`}
></Avatar>}
/>
)}
renderOption={option => (
<React.Fragment>
<img
style={{ height: 30,width: 30 }}
src={`data:image/jpeg;base64,${option.image.data}`}
></img>{' '}
{option.listDescription}
</React.Fragment>
)}
/>
解决方法
const CountryComponent = (props) =>
{
const countrySelected = useRef(null);
const [externalData,setExternalData] = useState(null);
const [foundCountry,setFoundCountry] = useState(null);
let captureForm = useFormikContext();
// check if the form value has changed
if (captureForm.values != null && captureForm.values.country != null && captureForm.values.country != '')
countrySelected.current = captureForm.values.country;
let findCountry = function(data)
{
// routine to set the country when the list initialized or the value changes
if (data != null && countrySelected.current != null)
{
setFoundCountry(data.find(element => element.listCode === countrySelected.current));
}
};
useEffect(() => {
// make the request to get the country data (this only happens once)
let asyncRequest = null;
function getData() {
asyncRequest = Api('country/all','Get').then(
externalData => {
asyncRequest = null;
// force the render
setExternalData(externalData);
findCountry(externalData);
}
);
}
getData();
return function cleanup() {
// cleanup the async request as on component deallocation - this will be run by useEffect as its the returning function
if (asyncRequest) {
asyncRequest.cancel();
}
}
},[]);
useEffect(() => {
// determine the selected country once the form is re-rendered (this will only be called if the value changes)
findCountry(externalData);
},[countrySelected.current]);
return externalData ?
(
<div>
<Autocomplete
name="country"
options={externalData}
getOptionLabel={option => option.listDescription}
value={foundCountry}
getOptionSelected={(option,value) => option.listCode === value.listCode}
onChange={(e,value) => {
if (value != null)
{
captureForm.setFieldValue('country',value.listCode);
captureForm.setFieldValue('region',value.region);
captureForm.setFieldValue('flag',value.image.data);
}
}}
renderInput={params => (
<TextField
{...params}
error={Boolean(captureForm.touched.country && captureForm.errors.country)}
helperText={captureForm.touched.country && captureForm.errors.country}
name="country"
label="Select Country"
variant="outlined"
onChange={(e,value) => captureForm.setFieldValue('country',value)} /**/
onBlur={() => captureForm.setFieldTouched('country',true)}
fullWidth
/>
)}
renderOption={option => (
<React.Fragment>
<img
style={{height: 30,width: 30}}
src={`data:image/jpeg;base64,${option.image.data}`}
></img>{' '}
{option.listDescription}
</React.Fragment>
)}
/>
</div>
) :
(
<div>Loading...</div>
);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。