React：将文本附加到 TextArea

Question

我想问我如何将输出变量（我通过 Axios 的 post 调用获得）附加到 textarea，它以输入变量作为其值。

我真的不知道如何做这样的事情......

我想得到下面视频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;

Answer 1

您只能使用一个 state 属性作为 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;
    });
});

Answer 2

这是我收到的错误消息

←→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 3

我将 Firebase 添加到我的项目中。问题是，现在当我尝试在 textarea 中写一些东西时，我得到 [object Object] 然后出现以下错误

FirebaseError: Function DocumentReference.update() called with invalid data. Unsupported field value: a custom SyntheticEvent object (found in field body)
▶ 11 stack frames were collapsed.
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.

这是我现在的代码

import React from 'react';
import ReactQuill from 'react-quill';
import debounce from '../helpers';
import BorderColorIcon from '@material-ui/icons/BorderColor';
import { withStyles } from '@material-ui/core/styles';
import styles from './styles';
import axios from "axios";

const TRANSLATE_API_URL = "/translate";


class EditorComponent extends React.Component {
  constructor() {
    super();
    this.state = {
      input: '',
      title: '',
      id: ''
    };
    this.handleClick = this.handleClick.bind(this);

  }

  componentDidMount = () => {
    this.setState({
      input: this.props.selectedNote.body,
      title: this.props.selectedNote.title,
      id: this.props.selectedNote.id
    });
  }

  componentDidUpdate = () => {
    if(this.props.selectedNote.id !== this.state.id) {
      this.setState({
        input: this.props.selectedNote.body,
        title: this.props.selectedNote.title,
        id: this.props.selectedNote.id
      });
    }
  }

  handleClick(e) {
    e.preventDefault();
    

    let body = {
      prompt: this.state.input
    };
    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;
    });
});
  }

  render() {

    const { classes } = this.props;

    return(
      <div className={classes.editorContainer}>
        <BorderColorIcon className={classes.editIcon}></BorderColorIcon>
        <input
          className={classes.titleInput}
          placeholder='Note title...'
          value={this.state.title ? this.state.title : ''}
          onChange={(e) => this.updateTitle(e.target.value)}>
        </input>

        <form onSubmit={this.handleClick}>
        <textarea
          rows={20}
          value={this.state.input} 
          onChange={this.updateBody}>
        </textarea>
        <button type="submit">Ai writer</button>
        </form>
      </div>
    );
  }
 

  updateBody = async (val) => {
    await this.setState({ input: val });
    this.update();
  };



  updateTitle = async (txt) => {
    await this.setState({ title: txt });
    this.update();
  }
  update = debounce(() => {
    this.props.noteUpdate(this.state.id, {
      title: this.state.title,
      body: this.state.input
    })
  }, 1500);
}

export default withStyles(styles)(EditorComponent);

我错过了什么？？？