Antd-vue select 点击展开选项的时候闪烁问题解决方案
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Antd-vue select 点击展开选项的时候闪烁问题解决方案相关的知识，希望对你有一定的参考价值。
参考技术A 由于点击select时选项展开有动画，所有关闭动画即可解决!实战经验记录！
Material-UI 和 Redux-form，点击 select 时重新渲染选项，如何防止？
【中文标题】Material-UI 和 Redux-form，点击 select 时重新渲染选项，如何防止？【英文标题】：Material-UI and Redux-form, re renders options clicked on select, how to prevent it? 【发布时间】：2021-09-05 22:19:54 【问题描述】：所以我的问题是我正在动态呈现选项，当我单击选择或选项时，组件会重新呈现并更改选项，因此我需要单击两次才能在选择中选择一个选项。它正在重新渲染，因为它会重新运行该函数，我是否应该将值 true/false 存储在反应钩子中并在第一次运行时更改它以便它不会重新运行该函数？
这是我的代码
这是创建选项的函数 渲染选项函数
const renderOptions = () =>
const days = [];
function dateWithMonthsDelay(months)
const date = new Date();
date.setDate(date.getDate() + months);
return date;
let i = 0;
for (let d = new Date(); d <= dateWithMonthsDelay(7); d.setDate(d.getDate() + 1))
if (isAuthenticated && user)
const u = user.name.match(/\d/g);
if (u)
const us = user.name.match(/\d/g).join('');
if (new Date(d).getDay() === 1
&& (us === '25'
|| us === '26'
|| us === '27'
|| us === '3'))
days.push(new Date(d));
else if (new Date(d).getDay() === 3 && (
us === '24'
|| us === '28'
|| us === '22'
|| us === '8'
|| us === '9'
|| us === '14'
))
days.push(new Date(d));
else if ((new Date(d).getDay() === 2 || new Date(d).getDay() === 5) && (
us === '17'
|| us === '21'
|| us === '7'
|| us === '2'
|| us === '4'
|| us === '18'
|| us === '20'
|| us === '23'
|| us === '10'
|| us === '12'
|| us === '16'
|| us === '5'
|| us === '29'
|| us === '30'
|| us === '11'
|| us === '19'
))
days.push(new Date(d));
return days.map((d) => (
<>
i === 0 ? (<option aria-label="None" value="" />) : null
i += 1
<option value=d>
moment(d).format('dddd - Do MMMM YYYY')
</option>
</>
));
;
这是表单组件的返回
<Header>
<Container component="main" maxWidth="md">
<div className=classes.paper>
<Typography component="h1" variant="h5">
GOLD
</Typography>
<form className=classes.form onSubmit=handleSubmit(onSubmit) noValidate>
<Field name="twentytwo" id="twentytwo" type="number" label="22k" component=renderField />
<Field name="eighteen" id="eighteen" type="number" label="18k" autoFocus component=renderField />
<Field name="fourteen" id="fourteen" type="number" label="14k" component=renderField />
<Field name="nine" id="nine" type="number" label="9k" component=renderField />
<Field name="argent" id="argent" type="number" label="Argent" component=renderField />
<Field
name="tournee"
options=(
<>
renderOptions
</>
)
id="tournee"
label="Dans la Tournee de"
component=renderSelect
/>
<Button
type="submit"
fullWidth
variant="contained"
color="secondary"
className=classes.submit
>
Ajouter
</Button>
</form>
</div>
<Box mt=8>
<Copyright />
</Box>
</Container>
</Header>
这是我的 redux-form 材质 ui 组件 渲染选择
export const renderSelect = (
input, label, meta, id, className, fullWidth, options,
) => (
<>
<FormControl fullWidth error=meta.touched && meta.error variant="outlined" className=className required>
<InputLabel htmlFor=id>label</InputLabel>
<Select native ...input id=id label=label>
options
</Select>
renderFromHelper(meta.touched, meta.error)
</FormControl>
</>
);
【问题讨论】：
【参考方案1】：所以我通过向状态添加选项来解决它，这里的运行状态是代码
const GoldForm = (
change, handleSubmit, weight, addGold, onSubmit, user, isAuthenticated,
) =>
const classes = useStyles();
const [options, setOptions] = React.useState(null);
const [run, setRun] = React.useState(true);
useEffect(() =>
renderOptions();
, [user]);
const renderOptions = () =>
if (run)
const days = [];
function dateWithMonthsDelay(months)
const date = new Date();
date.setDate(date.getDate() + months);
return date;
let i = 0;
for (let d = new Date(); d <= dateWithMonthsDelay(7); d.setDate(d.getDate() + 1))
if (isAuthenticated && user)
const u = user.name.match(/\d/g);
if (u)
const us = user.name.match(/\d/g).join('');
if (new Date(d).getDay() === 1
&& (us === '25'
|| us === '26'
|| us === '27'
|| us === '3'))
days.push(new Date(d));
else if (new Date(d).getDay() === 3 && (
us === '24'
|| us === '28'
|| us === '22'
|| us === '8'
|| us === '9'
|| us === '14'
))
days.push(new Date(d));
else if ((new Date(d).getDay() === 2 || new Date(d).getDay() === 5) && (
us === '17'
|| us === '21'
|| us === '7'
|| us === '2'
|| us === '4'
|| us === '18'
|| us === '20'
|| us === '23'
|| us === '10'
|| us === '12'
|| us === '16'
|| us === '5'
|| us === '29'
|| us === '30'
|| us === '11'
|| us === '19'
))
days.push(new Date(d));
const a = days.map((d, index) => (
<React.Fragment key=index + 1>
i === 0 ? (<option aria-label="None" value="" />) : null
i += 1
<option value=d>
moment(d).format('dddd - Do MMMM YYYY')
</option>
</React.Fragment>
));
setOptions(a);
setRun(false);
;
return (
<Header>
<Container component="main" maxWidth="md">
<div className=classes.paper>
<Typography component="h1" variant="h5">
GOLD
</Typography>
<form className=classes.form onSubmit=handleSubmit(onSubmit) noValidate>
<Field name="twentytwo" id="twentytwo" type="number" label="22k" component=renderField />
<Field name="eighteen" id="eighteen" type="number" label="18k" autoFocus component=renderField />
<Field name="fourteen" id="fourteen" type="number" label="14k" component=renderField />
<Field name="nine" id="nine" type="number" label="9k" component=renderField />
<Field name="argent" id="argent" type="number" label="Argent" component=renderField />
<Field
name="tournee"
options=options
id="tournee"
label="Dans la Tournee de"
component=renderSelect
/>
<Button
type="submit"
fullWidth
variant="contained"
color="secondary"
className=classes.submit
>
Ajouter
</Button>
</form>
</div>
<Box mt=8>
<Copyright />
</Box>
</Container>
</Header>
);
;
【讨论】：
以上是关于Antd-vue select 点击展开选项的时候闪烁问题解决方案的主要内容，如果未能解决你的问题，请参考以下文章
类似select下拉框,鼠标点击元素以外隐藏下拉框(阻止冒泡事件)