как изменить высоту текстового поля Material-UI без использования реакционных хуков - PullRequest
Новая
       10

как изменить высоту текстового поля Material-UI без использования реакционных хуков

0 голосов
/ 08 июля 2019

Мне нужно изменить высоту многострочного TextField с пользовательским интерфейсом материала в компонентах класса, чтобы оно было длиннее, но предыдущие примеры , которые я обнаружил на SO, похоже, используют функциональный компонент и хуки.

Мой код можно найти ниже или в этой песочнице 

import React, { Component } from "react";
import ReactDOM from "react-dom";
import TextField from "@material-ui/core/TextField";


class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      year: "2010",
      otherAttributes: ""
    };
  }

  handleChangefor = (propertyName) => (event) => {
    this.setState({
      ...this.state,
      [propertyName]: event.target.value
    })
  }

  render() {
    return (
      <div>
        <p>text field below </p>

        <TextField
          id="outlined-multiline-flexible"
          label="year"
          multiline
          rowsMax="10"
          value={this.state.year}
          onChange={this.handleChangefor("year")}
          margin="normal"
          helperText=""
          variant="filled"
        />
      </div>
    );
  }
}


const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Документация указывает на 'makeStyle' и 'useStyle' hoc, но я не смог найти примеры, где они находятсяиспользуется на компонентах класса.

1 Ответ

1 голос
/ 08 июля 2019

Вы должны иметь возможность использовать withStyles - мне пришлось использовать minHeight ... использование только height не будет работать для меня ..

Редактировать: с тех порВы спрашивали о нескольких TextFields в одном классе, я обновил свой ответ.

Один класс с одним TextField: 

import React, { Component } from "react";
import ReactDOM from "react-dom";
import TextField from "@material-ui/core/TextField";
import { withStyles } from "@material-ui/core/styles";

const styles = {
  someTextField: {
    minHeight: 420
  }
};


class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      year: "2010",
      otherAttributes: "",
    };
  }

  handleChangefor = (propertyName) => (event) => {
    this.setState({
      ...this.state,
      [propertyName]: event.target.value
    })
  }

  render() {
    return (
      <div>
        <p>text field below </p>

        <TextField
          id="outlined-multiline-flexible"
          label="year"
          multiline
          rowsMax="10"
          value={this.state.year}
          onChange={this.handleChangefor("year")}
          margin="normal"
          helperText=""
          variant="filled"
          InputProps={{ classes: { input: this.props.classes.someTextField } }}
        />
      </div>
    );
  }
}

const StyledTextFieldApp = withStyles(styles)(App)

const rootElement = document.getElementById("root");
ReactDOM.render(<StyledTextFieldApp />, rootElement);

Один класс с несколькими текстовыми полями: 

import React, { Component } from "react";
import ReactDOM from "react-dom";
import TextField from "@material-ui/core/TextField";
import { withStyles } from "@material-ui/core/styles";

const styles = {
  someTextField: {
    minHeight: 420
  },
  someOtherTextField: {
    minHeight: 120,
  }
};


class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      year: "2010",
      otherAttributes: "",
    };
  }

  handleChangefor = (propertyName) => (event) => {
    this.setState({
      ...this.state,
      [propertyName]: event.target.value
    })
  }

  render() {
    return (
      <div>
        <p>text field below </p>

        <TextField
          id="outlined-multiline-flexible"
          label="year"
          multiline
          rowsMax="10"
          value={this.state.year}
          onChange={this.handleChangefor("year")}
          margin="normal"
          helperText=""
          variant="filled"
          InputProps={{ classes: { input: this.props.classes.someTextField } }}
        />
        <TextField
          id="outlined-multiline-flexible"
          label="year"
          multiline
          rowsMax="10"
          value={this.state.year}
          onChange={this.handleChangefor("year")}
          margin="normal"
          helperText=""
          variant="filled"
          InputProps={{ classes: { input: this.props.classes.someOtherTextField } }}
        />
      </div>
    );
  }
}

const StyledTextFieldApp = withStyles(styles)(App)

const rootElement = document.getElementById("root");
ReactDOM.render(<StyledTextFieldApp />, rootElement);
...