通過 GetElementByName 獲取文本區域的值

Question

我正在嘗試將文本區域的值添加到我的組件的 state 中。 但它似乎沒有用。 在 console.log 中。 它正確地給了我 id 但值未定義。 addListItem 由按鈕觸發。

import React from "react";
import ReactDOM from "react-dom";

import "../../styles/styles.css";

class BlockInput extends React.Component {
  state = {
    items: [{ id: 0, value: "" }],
  };

  addListItem = () => {
    console.log(this.state);
    var x = parseInt(document.getElementById("seed").innerHTML);

    const newItem = {
      id: x,
      value: document.getElementsByName("hi").text,
    };

    document.getElementById("seed").innerHTML = x + 1;
    this.setState({
      items: [...this.state.items, newItem],
    });
  };

  createList = () => {
    const { items } = this.state;
    return items.map((item) => {
      return (
        <div>
          <textarea className="item" id={item.id} type="text" name="hi" ></textarea>
          <button type="button" onClick={(e) => this.handleDelete(item)}>
            delete
          </button>
        </div>
      );
    });
  };

Answer 1

function getElementsByName返回“文檔中具有指定名稱的所有元素的集合”而不是單個元素，其次，如果您只有一個具有該名稱的文本區域（在您的頁面中），您應該使用值來讀取文本區域內的內容，此代碼將工作。

document.getElementsByName("hi")[0].value