如何将React组件state中的文本转为小写？

你当前的问题在于直接把state的text设置成了固定的"hello"，这只能处理初始值为"Hello"的情况，没法适配文本变化的场景。正确的做法是基于当前state里的文本内容，调用字符串的toLowerCase()方法动态生成转换后的值。

修正后的类组件代码 #

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { text: "Hello" };
    this.toLowerCase = this.toLowerCase.bind(this);
  }

  toLowerCase() {
    // 基于当前state的文本动态转小写
    this.setState({ text: this.state.text.toLowerCase() });
  }

  render() {
    return <div onClick={this.toLowerCase}>{this.state.text}</div>;
  }
}

更稳妥的函数式更新写法 #

因为React的setState是异步操作，如果存在多个连续的state更新，直接依赖this.state可能会拿到旧值。这种情况下推荐用函数式更新，确保基于最新的state计算：

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { text: "Hello" };
    this.toLowerCase = this.toLowerCase.bind(this);
  }

  toLowerCase() {
    this.setState(prevState => ({
      text: prevState.text.toLowerCase()
    }));
  }

  render() {
    return <div onClick={this.toLowerCase}>{this.state.text}</div>;
  }
}

关键说明 #

• 核心改动是把固定的"hello"替换成this.state.text.toLowerCase()（或函数式里的prevState.text.toLowerCase()），这样不管初始文本是什么，都能正确转为小写
• 如果你的组件是函数式组件，写法会更简洁，但上面的示例保持了你原来的类组件结构

内容的提问来源于stack exchange，提问作者trainee