React：将文本附加到 TextArea

Question

我想问一下如何将输出变量（我通过使用 Axios 的 post 调用获得）附加到文本区域，该文本区域将输入变量作为其值。

我简直不知道该怎么做...

我想获得与以下视频相同的结果https://www.youtube.com/watch?v=OcyBYfK6gfY

import React from "react";
import { Form, Button } from "react-bootstrap";
import axios from "axios";



import "bootstrap/dist/css/bootstrap.min.css";

const TRANSLATE_API_URL = "/translate";




class Interface extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: "",
      output: "",
      buttonText: "Submit",
      description: "Description",
    };
    // Bind the event handlers
    this.handleInputChange = this.handleInputChange.bind(this);
    this.handleClick = this.handleClick.bind(this);


  }





  handleInputChange(e) {
    this.setState({ input: e.target.value });
  }

  handleClick(e) {
    e.preventDefault();
    let body = {
      prompt: this.state.input
    };
    axios.post(TRANSLATE_API_URL, body).then(({ data: { text } }) => {
      this.setState({ output: text });
    });
  }

  render() {
    return (
      <div>
        <head />
        <body style={{ alignItems: "center", justifyContent: "center" }}>
          <div
            style={{
              margin: "auto",
              marginTop: "80px",
              display: "block",
              maxWidth: "500px",
              minWidth: "200px",
              width: "50%"
            }}
          >
          
            <Form onSubmit={this.handleClick}>
              <Form.Group controlId="formBasicEmail">            
                <Form.Label>{this.state.description}</Form.Label>
                <Form.Control
                  type="text"
                  as="textarea"
                  className="tarea"
                  placeholder="Enter text"
                  value={this.state.input}
                  onChange={this.handleInputChange}
                ></Form.Control>
              </Form.Group>

              <Button variant="primary" type="submit">
                {this.state.buttonText}
              </Button>
            </Form>

            {this.state.output}
            
          </div>
        </body>
      </div>
    );
  }
}

export default Interface;

这是我收到的错误消息

←→1 of 57 errors on the page
TypeError: Cannot read property 'input' of undefined
(anonymous function)
C:/Users/mario/Desktop/Vs projects/gpt3-sandbox-1/src/components/Interface.js:51
  48 |      let timerDelay = 0;
  49 |      text.split(" ")
  50 |        .forEach(word => setTimeout(function(){
> 51 |            this.setState({ input: this.state.input + word });
     | ^  52 |          },timerDelay),
  53 |

Answer 1

您只能使用一种状态属性作为 textarea 值。

要保留之前的文本并向其添加 Axios 响应，我会尝试：

this.setState({ input: this.state.input + text });

而不是：

this.setState({ output: text });

要逐字添加效果，试试这个：

let thisComponent = this;
axios.post(TRANSLATE_API_URL, body).then(({ data: { text } }) => {
  
  let wordDelay = 100  // Add a word every 100ms
  
  let timerDelay = 0
  text.split(" ")
    .forEach(word => {
      setTimeout(function(){
        thisComponent.setState({ input: thisComponent.state.input + " " + word });
      },timerDelay);
      timerDelay += wordDelay;
    });
});

React：将文本附加到 TextArea

React: Appending Text to a TextArea

forms

textarea

class

append

reactjs