Как установить высоту, зная, что при вводе появится вспомогательный текст в React MaterialUI v3.7?

Question

Как вы видите ниже, вспомогательный текст появляется под вводом, если на входе недопустимое значение.

Но когда он действителен, вспомогательный текст отсутствует.

В процессе ввода с помощьюпроверка правильности ввода.Как я могу решить эту проблему?

Answer 1

Ответ Рудольфа близок к тому, что вам нужно, но minHeight необходимо применить к TextField (FormControl при непосредственном использовании компонентов более низкого уровня), а не к FormHelperText, потому что когда вспомогательный текст равен нулюкомпонент FormHelperText вообще не отображается, поэтому minHeight не имеет никакого эффекта.

Вот рабочий пример (для удобства я использую ловушки для управления состоянием, поэтому в настоящее время это работает только с реагирующей альфой, но подход стиля не зависит от этого):

import React, { useState } from "react";
import ReactDOM from "react-dom";

import TextField from "@material-ui/core/TextField";
function App(props) {
  const [value, setValue] = useState("");
  const errorMessage = value.length === 0 ? "Please enter something" : null;
  const helperTextProps = {
    error: value.length === 0 ? true : false
  };
  const textFieldStyle = { minHeight: "5rem" };
  return (
    <div>
      <TextField label="name" style={textFieldStyle} />
      <br />
      <TextField
        label="email"
        helperText={errorMessage}
        FormHelperTextProps={helperTextProps}
        value={value}
        onChange={event => setValue(event.target.value)}
        style={textFieldStyle}
      />
      <br />
      <TextField label="other" style={textFieldStyle} />
    </div>
  );
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

И здесь это в изолированной программной среде кода.

Answer 2

Если вы используете TextField, вы можете передать дополнительные свойства для вспомогательного текста :

render() {
  const errorMessage = this.state.error ? "error happened" : null;
  const helperTextProps = {
    error: this.state.error ? true : false,
    style: { minHeight: "1rem" }
  };
  return (
    <TextField label="email" helperText={errorMessage} FormHelperTextProps={helperTextProps} />
  );
}

Примечание: я не проверял этот кодэто просто чтобы понять суть.