如何解决每次父组件渲染时,如何防止反应组件渲染?
我在一个表单上有一个 TextField 输入,问题是当我在上面输入时,刚刚输入的值的显示/呈现有一种延迟,我想防止这种情况发生。
上下文: TextField 是标签,名称和 id 来自一个名为“formInput”的状态对象,每次按下按钮时它们都会更改它们的值。此单个输入的值存储在名为“inputsValue”的不同状态对象中,该对象在 TextField 的 onChange 属性上调用的“handleChange”函数内发生变化。
问题在于 可疑的: 我制作了一个“BouncyLetters”组件并在一个也呈现表单的组件中使用它,我使用 BouncyLetters 作为表单的标题。当我从页面中删除此组件时,打字显示以正常速度显示。所以我认为禁用重新渲染总是可以解决问题,idk。谢谢
代码:
export const Contact = (props) => {
const [formInput,setFormInput] = useState({input: 'name',label: 'Type name'});
¿ const [inputsValue,setInputsValue] = useState({name: '',email: '',message: ''});
const handleClick = () => {
switch (formInput.input) {
case 'name':
setFormInput({ input: 'email',label: 'type email' });
break;
case 'email':
setFormInput({ input: 'message',label: 'type message' });
break;
case 'message':
setFormInput({ input: 'name',label: 'type name' });
handleSubmission();
break;
default:
break;
}
}
const handleChange = event => {
setInputsValue({
...inputsValue,[event.target.name]: event.target.value
});
}
const handleSubmission = event => {
console.log('SUBMITTED CONTACT FORM')
}
return (
<form>
<Grid container>
<Grid item xs={12} sm={10}>
<BouncyText />
</Grid>
</Grid>
<Grid container spacing={2}>
<Grid item xs={12} id="contactFomrField">
<TextField
fullWidth
id={formInput.input}
label={formInput.label}
name={formInput.input}
value={inputsValue[formInput.input]}
onChange={handleChange}
/>
</Grid>
</Grid>
<Grid
container
justify="center"
alignItems="center"
>
<Button
onClick={handleClick}
variant="outlined"
color="primary"
>
{ formInput.input !== 'message' ? 'Next' : 'Send :)'}
</Button>
</form>
)
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。