Material-UI 在 React 中将单词大写

Question

我想将<TextField>组件中的文本大写。

当前文本：LeaGUE of LEGENdS
所需格式：League of Legends

我试过使用，text-transform: 'capitalize'但它没有按我期望的那样工作。

我还有一个函数可以使用纯 JS 将我的文本大写：

string.toLowerCase()
            .split(' ')
            .map((s) => s.charAt(0).toUpperCase() + s.substring(1))
            .join(' ');

问题是我不知道我应该如何使用JS函数，因为我想在多个<TextField>组件中大写文本，但我不想覆盖material-ui组件。有没有办法使用道具？

Answer 1

将“英雄联盟”转换为“英雄联盟”的一种简单方法是使用 inputProps 道具：

<TextField inputProps={{style: {textTransform: 'capitalize'}}} />

Answer 2

我在文档中没有看到它material-ui，但material-ui/core看起来有一个大写实用函数。所以...

import { capitalize } from '@material-ui/core';

...

const text = 'something';

console.log(capitalize(text)); // 'Something'

Answer 3

现在正在工作。我认为你不能只使用 css 来做到这一点，你需要一些 javacsript。

例子：

https://codesandbox.io/s/material-ui-playground-s5us4

或者

import React, { PureComponent } from "react";
import { render } from "react-dom";
import TextField from "material-ui/TextField";

class CustomTextField extends PureComponent {
  state = {
    value: ""
  };

  onChange = event => {
    const { value } = event.target;
    this.setState({ value: this.prettyString(value) });
  };

  prettyString = str => {
    var nextCapital = true;
    var newString = "";
    for (var i = 0; i < str.length; i++) {
      var cur = str.charAt(i);
      if (nextCapital) {
        newString += cur.toUpperCase();
      } else {
        newString += cur.toLowerCase();
      }
      if (cur === " ") {
        nextCapital = true;
      } else {
        nextCapital = false;
      }
    }
    return newString;
  };

  render() {
    const { value } = this.state;
    return <TextField value={value} onChange={this.onChange} />;
  }
}

render(<CustomTextField />, document.querySelector("#root"));