Material-UI Multiline TextField 水平滚动答案

【问题标题】：Material-UI Multiline TextField scrolls horizontallyMaterial-UI Multiline TextField 水平滚动
【发布时间】：2020-01-11 20:05:35
【问题描述】：

我正在尝试使用 Material UI 来实现多行 TextField。输入字段不是多行的，而是水平滚动的。我已经在代码沙箱中复制了这个问题（下面的链接）。我想要多行的是 FormItemDetails.js 中的 Ad Description 字段。我很感激任何帮助！谢谢

Code Sandbox

import React, { useState, useEffect } from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import TextField from 'material-ui/TextField';
import RaisedButton from 'material-ui/RaisedButton';

export default function FormItemDetails(props) {
    const { values, handleChange } = props;
    const [ error, setError ] = useState(null)
    console.log(values)

    const errorDiv = error 
    ? <div className="error">
        <i class="material-icons error-icon">error_outline</i>
        {error}
      </div> 
    : '';

    useEffect(() => setError(null), []);

    function cont(e) {
        e.preventDefault();

        const requiredFields = ['title', 'description', 'price']

        for (const key of requiredFields) {
            if (!values[key]) {
                setError(`A ${key} is required`)
                return
            }
        }
        props.nextStep();
    };  

    function back() {
        props.prevStep();
    }


    return (
        <MuiThemeProvider>
            <>
            <h2>Enter the advertisement details</h2>
            {errorDiv}
            <TextField 
                required={true}
                fullWidth={true}
                hintText="Enter Your Ad Title"
                floatingLabelText="Ad Title"
                onChange={handleChange('title')}
                defaultValue={values.title}
            />
            <br />
            <TextField 
                required={true}
                fullWidth={true}
                multiline
                hintText="Enter Your Ad Description"
                floatingLabelText="Ad Description"
                onChange={handleChange('description')}
                defaultValue={values.description} 
            />
            <br />
            <TextField 
                required
                fullWidth
                hintText="Enter Your Asking Price"
                floatingLabelText="Price"
                onChange={handleChange('price')}
                defaultValue={values.price}
                
            />
            <br />
            <RaisedButton
                label="Continue"
                primary={true}
                style={styles.button}
                onClick={cont}
            />
            <RaisedButton
                label="Back"
                primary={false}
                style={styles.button}
                onClick={back}
            />
            </>
        </MuiThemeProvider>
    )
}

【问题讨论】：

你好 Lydia，请查看此链接 codesandbox.io/s/t8dkp 并检查/尝试使用 import '@material-ui/core/TextField' 而不是 "material-ui/TextField"。让我们知道。
你是不是故意使用 Material-UI 的0.20 version 而不是4.x version？
更改为 '@material-ui/core/TextField' 有效！（我也更新到最新版本）。我没有意识到我使用的是旧版本。谢谢！
@marcode_ely 你能把你的解决方案写成答案吗？

标签： reactjs material-ui

【解决方案1】：

更新项目中使用的material-ui 库。实际上，您正在使用 material-ui/TextField 并且必须更改为 @material-ui/core/TextField 才能在 textField 中实现预期的行为。查看此演示codesandbox.io/s/t8dkp

重要提示：还要检查最后一个库版本。

【讨论】：