使用React将文本转大写并赋值给Textarea的问题咨询

问题原因与修复方案 #

你当前代码存在3个核心问题导致赋值失败：

• 未给textarea绑定value属性与state关联，状态更新后视图无法同步响应
• 不能直接通过this.state.xxx = xxx的方式修改状态，React 必须调用setState方法更新状态才会触发组件重渲染
• React 组件类名首字母必须大写，原有代码的类名textCase不符合规范，同时DOM属性要使用className代替class

修改后的完整代码 #

import React, { Component } from "react";
import { Container, Card, Button,ButtonGroup, ButtonToolbar} from "react-bootstrap";
import { Link } from "react-router-dom";

import { upperCase, lowerCase } from "text-case"; 

class TextCase extends Component {
  state = {
    input: "",
  };

  convertTextToUpperCase = () => {
    // 调用setState更新状态
    this.setState({
      input: upperCase(this.state.input)
    })
  };

  // 后续加小写转换直接加对应方法即可
  convertTextToLowerCase = () => {
    this.setState({
      input: lowerCase(this.state.input)
    })
  };

  render() {
    return (
      <>
        <div className="App">
          <Container container-lg>
            <div className="services-grid">
              <div className="text-case">
                <Card>
                  <Card.Header>Paste your text below</Card.Header>
                  {/* 绑定value到state.input */}
                  <textarea
                    rows={15}
                    value={this.state.input}
                    onChange={(e) => {
                      this.setState({
                        input: e.target.value,
                      });
                    }}
                  ></textarea>
                </Card>
                <ButtonToolbar aria-label="Toolbar with button groups">
                  <ButtonGroup className="me-2" aria-label="First group">
                    <Button onClick={this.convertTextToUpperCase}>
                      Uppercase
                    </Button>
                    <Button onClick={this.convertTextToLowerCase}>
                      Lowercase
                    </Button>
                  </ButtonGroup>
                </ButtonToolbar>
              </div>
            </div>
          </Container>
        </div>
      </>
    );
  }
}

export default TextCase;

核心修改说明 #

1. 给textarea添加value={this.state.input}属性，实现输入框内容和状态的双向绑定
2. 改写convertTextToUpperCase方法，通过setState更新状态，触发组件重渲染同步更新输入框内容
3. 提前预留了小写转换的方法示例，后续新增其他转换格式只要参考该逻辑新增对应方法即可

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