React Material-ui 文本域屏幕抖动答案

【问题标题】：React material-ui text field screen shakesReact Material-ui 文本域屏幕抖动
【发布时间】：2019-09-11 05:21:44
【问题描述】：

我有一个简单的反应代码。有一个material-UI Textfield。

单击文本框输入数据时，屏幕抖动。输入数据后，我点击外面，框屏抖动。请帮我解决这个屏幕抖动问题。非常感谢。

import Grid from '@material-ui/core/Grid';
import TextField from '@material-ui/core/TextField';
import PropTypes from 'prop-types';
import React, { useState } from 'react';
const Login = props => {

    return (
        <div>
            <Grid container spacing={2} justify="center">

                <Grid item xs={12} container justify="center" spacing={2}>
                    <Grid item xs={3}>
                        <TextField
                            label="fd"
                            variant="outlined"
                            fullWidth
                        >
                        </TextField>
                    </Grid>
                </Grid>
            </Grid>

        </div>
    )
}

export default Login;

【问题讨论】：

你能制作一个codepen吗？

标签： javascript reactjs material-ui

【解决方案1】：

只需如下设置Text Fields的onChange属性，抖动就会消失。

import React, { useState } from 'react';
import Grid from '@material-ui/core/Grid';
import TextField from '@material-ui/core/TextField';
import PropTypes from 'prop-types';
import React, { useState } from 'react';

const Login = props => {
    const [name,setName] = useState("")

    return (
        <div>
            <Grid container spacing={2} justify="center">
               <Grid item xs={12} container justify="center" spacing={2}>
                    <Grid item xs={3}>
                        <TextField
                            label="fd"
                            variant="outlined"
                            fullWidth
                            onChange={e => setName(e.target.value)}
                        />
                    </Grid>
                </Grid>
            </Grid>
        </div>
    )
}

export default Login;

【讨论】：