Javascript 如何将textarea传递给变量

我还没有反应过来。我有一个使用textarea产生问题的代码。我需要制作一个表格，保存插入文本区域的标题和问题描述。但我似乎没有成功地收集文本区内的内容。 这是y代码

import React, { Component } from "react";
import "../../styles/styles.css";
import BlockInput from "../pages/blockInput";

class CreateProblem extends Component {
 change = () => {
   
   var text = document.getElementById("title").innerHTML;

   document.getElementById("col1").innerHTML = text;
 };
 changetwo = () => {
  
   var z = document.getElementById("problem").innerHTML;
   document.getElementById("col2").innerHTML = z;
 };

 render() {
   return (
     <div>
     <h3>Enter the problem title : </h3>
           <textarea
               id="title"
               name="textValue"
               onChange={this.handleChange}
               className="item"
             ></textarea>
             <button onClick={this.change}> OK </button>
         
             <h3>Enter the problem description : </h3>
             <div>
               {" "}
               <textarea
                 id="problem"
                 name="textValue"
                 onChange={this.handleChange}
                 className="problemDescribe"
               >
                 {" "}
               </textarea>
               <button onClick={this.changetwo}> OK </button>
             </div>

             <h3> Add new blocks</h3>
             {" "}
             <BlockInput />
             <h4 id="seed">1</h4>
                   
       <table className="table">
         <th>
           <td id="col1"></td>
         </th>
         <th>
           <td>
             <div id="col2"> </div>
           </td>
         </th>
       </table>
     </div>
   );
 }
}

export default CreateProblem;

import React，{Component}来自“React”；
导入“../../styles/styles.css”；
从“./pages/BlockInput”导入块输入；
类CreateProblem扩展组件{
更改=（）=>{
var text=document.getElementById（“title”）.innerHTML；
document.getElementById（“col1”）.innerHTML=text；
};
changetwo=（）=>{
var z=document.getElementById（“问题”）.innerHTML；
document.getElementById（“col2”）.innerHTML=z；
};
render（）{
返回(
输入问题标题：
好啊
输入问题描述：
{" "}
{" "}
好啊
添加新块
{" "}
1.
);
}
}
出口违约问题；

使用

import React，{Component}来自“React”；
导入“../../styles/styles.css”；
从“./pages/BlockInput”导入块输入；
类CreateProblem扩展组件{
建造师（道具）{
超级（道具）；
此.state={
_标题：“，
标题：“，
_问题：“，
问题：“，
};
}
常量更改=（）=>{
this.setState（{title:_title}）；
};
常量changetwo=（）=>{
this.setState（{problem:_problem}）；
};
render（）{
返回(
输入问题标题：
this.setState（{u title:e.target.value}}}
className=“项目”
>
好啊
输入问题描述：
{" "}
this.setState（{u problem:e.target.value}）
className=“problemdescription”
>
{" "}
好啊
添加新块
{" "}
1.
{this.state.title}
{this.state.problem}
);
}
}
出口违约问题；

使用

import React，{Component}来自“React”；
导入“../../styles/styles.css”；
从“./pages/BlockInput”导入块输入；
类CreateProblem扩展组件{
建造师（道具）{
超级（道具）；
此.state={
_标题：“，
标题：“，
_问题：“，
问题：“，
};
}
常量更改=（）=>{
this.setState（{title:_title}）；
};
常量changetwo=（）=>{
this.setState（{problem:_problem}）；
};
render（）{
返回(
输入问题标题：
this.setState（{u title:e.target.value}}}
className=“项目”
>
好啊
输入问题描述：
{" "}
this.setState（{u problem:e.target.value}）
className=“problemdescription”
>
{" "}
好啊
添加新块
{" "}
1.
{this.state.title}
{this.state.problem}
);
}
}
出口违约问题；

您的textArea组件有一个onChange={this.handleChange}方法来处理该元素中的更改，但您没有在任何地方使用文本框的值

我建议您使用一个状态来存储该信息，以便正确使用它

尝试：

import React，{Component}来自“React”；
导入“../../styles/styles.css”；
从“./pages/BlockInput”导入块输入；
类CreateProblem扩展组件{
建造师（道具）{
超级（道具）；
this.state={title:''，description:''}；
}
更改=（字段）=>（值）=>{
this.setState（{…this.state，this.state[field]：value}）；
};
render（）{
返回(
输入问题标题：
好啊
输入问题描述：
{" "}
{" "}
好啊
添加新块
{" "}
1.
);
}
}
出口违约问题；

您的textArea组件有一个onChange={this.handleChange}方法来处理该元素中的更改，但您没有在任何地方使用文本框的值

我建议您使用一个状态来存储该信息，以便正确使用它

尝试：

import React，{Component}来自“React”；
导入“../../styles/styles.css”；
从“./pages/BlockInput”导入块输入；
类CreateProblem扩展组件{
建造师（道具）{
超级（道具）；
this.state={title:''，description:''}；
}
更改=（字段）=>（值）=>{
this.setState（{…this.state，this.state[field]：value}）；
};
render（）{
返回(
输入问题标题：
好啊
输入问题描述：
{" "}
{" "}
好啊
添加新块
{" "}
1.
import React, { Component } from "react";
import "../../styles/styles.css";
import BlockInput from "../pages/blockInput";

class CreateProblem extends Component {
  constructor(props) {
    super(props);
    this.state = {
      _title: "",
      title: "",
      _problem: "",
      problem: "",
    };
  }

  const change = () => {
    this.setState({ title: _title });
  };
  const changetwo = () => {
    this.setState({ problem: _problem });
  };
  render() {
       return (
     <div>
     <h3>Enter the problem title : </h3>
           <textarea
               id="title"
               name="textValue"
               onChange={(e) => this.setState({ _title: e.target.value })}}
               className="item"
             ></textarea>
             <button onClick={this.change}> OK </button>
             <h3>Enter the problem description : </h3>
             <div>
               {" "}
               <textarea
                 id="problem"
                 name="textValue"
                 onChange={(e) => this.setState({_problem: e.target.value})}
                 className="problemDescribe"
               >
                 {" "}
               </textarea>
               <button onClick={this.changetwo}> OK </button>
             </div>
             <h3> Add new blocks</h3>
             {" "}
             <BlockInput />
             <h4 id="seed">1</h4>
       <table className="table">
         <th>
           <td id="col1">{this.state.title}</td>
         </th>
         <th>
           <td>
             <div id="col2">{this.state.problem}</div>
           </td>
         </th>
       </table>
     </div>
       );
  }
}

export default CreateProblem;

import React, { Component } from "react";
import "../../styles/styles.css";
import BlockInput from "../pages/blockInput";

class CreateProblem extends Component {
 constructor(props) {
    super(props);
    this.state = {title: '', description: ''};
  }

 change = (field) => (value) => {
   this.setState({...this.state, this.state[field]: value});
 };


 render() {
   return (
     <div>
     <h3>Enter the problem title : </h3>
           <textarea
               id="title"
               name="textValue"
               onChange={this.handleChange}
               value={this.state.title}
               className="item"
             ></textarea>
             <button onClick={this.change}> OK </button>
         
             <h3>Enter the problem description : </h3>
             <div>
               {" "}
               <textarea
                 id="problem"
                 name="textValue"
                 value={this.state.description}
                 onChange={this.handleChange}
                 className="problemDescribe"
               >
                 {" "}
               </textarea>
               <button onClick={this.changetwo}> OK </button>
             </div>

             <h3> Add new blocks</h3>
             {" "}
             <BlockInput />
             <h4 id="seed">1</h4>
                   
       <table className="table">
         <th>
           <td id="col1"></td>
         </th>
         <th>
           <td>
             <div id="col2"> </div>
           </td>
         </th>
       </table>
     </div>
   );
 }
}

export default CreateProblem;

import React, { Component } from "react";
import "./styles.css";

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = { id: "", problemDesc: "" };
  }
  handleChange = (e) => {
    console.log("problemDesc", e.target.value);
    this.setState({ problemDesc: e.target.value });
  };

  render() {
    return (
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <textarea onChange={this.handleChange}></textarea>
        <br />
        {this.state.problemDesc} //see the updated value here
      </div>
    );
  }
}