时间戳

首页 > 解决方案 > 使用 Reactjs 转换为大写并设置为 Textarea 值

reactjs - 使用 Reactjs 转换为大写并设置为 Textarea 值

问题描述

我写了一个程序，它有一个 Textarea 用户输入文本，然后单击按钮。我想将 textarea 文本替换为大写。

而且，我希望在同一个文本区域中输出。

我写了这个，但它没有在 textarea 中设置转换后的文本。当我使用 console.log 检查时，它运行良好。

我不知道如何将转换后的文本设置为 textarea。

我正在使用这个包（https://www.npmjs.com/package/text-case）进行文本大小写转换。我打算添加小写字母和其他字母。这就是为什么。

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

import { upperCase } from "text-case"; //https://www.npmjs.com/package/text-case

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

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

  convertTextToUpperCase = () => {
    this.state.output = upperCase(this.state.input);
  };
}

export default textCase;

标签： reactjs

解决方案

我们可以做一个简单的修改来做你想要的。

首先，在 React 组件中，在方法之前编写自定义方法是一种惯例render，我建议按此convertTextToUpperCase顺序移动。

要修复您拥有的流程：

  convertTextToUpperCase = () => {
    this.setState((currentState) => ({
       ...currentState,
       input: upperCase(currentState.input),
    }));
  };

上述更改包括使用setState负责更改 React 组件状态的方法。

阅读：setState 做什么？

此外，您仍然可以使用 JS 字符串.toUpperCase或任何字符串.toLowerCase。

如：

let firstName = "kolay";

firstName = firstName.toUpperCase();
console.log(firstName);
// output: KOLAY

firstName = firstName.toLowerCase();
// output: kolay

推荐阅读