Question

我在一个表单上有一个 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>
    )
}

每次父组件渲染时，如何防止反应组件渲染？

0 个答案: