TextField не рендерится, когда fullWidth имеет значение true - PullRequest
Новая
       4

TextField не рендерится, когда fullWidth имеет значение true

1 голос
/ 17 марта 2019

У меня есть приложение React, и я использую Material response-text-field .По какой-то причине, когда я отмечаю fullWidth как true, отображается только контур поля ввода.Если я установлю fullWidth на false, все будет работать нормально (за исключением того, что мой элемент управления вводом не имеет полной ширины).

Вот снимок экрана, показывающий, как он отображается, если fullWidth равен false:

enter image description here

А вот снимок экрана того, как он рендерится, если fullWidth равен true:

enter image description here

Обратите внимание, что я больше не могу щелкать в текстовом поле или вводить какой-либо текст в текстовое поле, и моя метка не отображается сейчас.

Вот мой код JavaScript: 

import React from 'react';
import TextField, { HelperText, Input } from '@material/react-text-field';

import './LoginBox.scss';

export default class LoginBox extends React.Component {
    state = { value: '' };

    render() {
        return (
            <div className="login-box">
                <div className="caption">
                    <h1>Login</h1>
                    <p>Enter username or email address and password to log in.</p>
                    <hr />
                </div>
                <div className="content">
                    <TextField
                        outlined={true}
                        fullWidth={true}
                        label="Email or Username"
                    >
                        <Input
                            value={this.state.value}
                            onChange={(e) => this.setState({ value: e.currentTarget.value })}
                        />
                    </TextField>
                </div>
            </div>
        );
    }
}

Может кто-нибудь объяснить, почему изменение этого свойства fullWidth может вызвать такое поведение?

1 Ответ

0 голосов
/ 18 марта 2019

Использование fluid Вместо fullWidth: true

Решение: 

 <TextField
   outlined={true}
   fluid
   label="Email or Username"
 >
...