reactjs - 如何在不使用反应钩子的情况下更改 Material-UI 文本字段的高度

Question

我需要将类组件中的多行材质-UI 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，但我找不到在类组件上使用它们的示例。

标签： reactjsmaterial-ui

Answer 1

你应该可以使用withStyles- 我必须使用minHeight......使用只是height对我不起作用..

编辑：TextFields由于您在一个班级中询问多个，我已经更新了我的答案。

• Stackblitz - 具有单个 TextField 的单个类

• Stackblitz - 具有多个 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);