Javascript 写入JS以存储10个值，但TypeError:input是一个空元素标记，不能有'children'，也不能使用'dangerlySetinerHTML'

我正在React中编写一个JavaScript函数，用于向数组中添加10个值 这是从Html输入字段存储的10个值 因此，我所做的是添加id为“tsk”的输入字段和按钮“bt3”，这样每当按下按钮时，它就会运行一个js脚本，该脚本接受输入字段“tsk”的值，并将其推到js中的空数组中 所以每次我按下按钮，字段中的值就会被推到数组中 并使用innerHTML方法在标签“list”上进行提示

下面是我对html的努力

 <div id='array'>
      <input type='number' id='tsk'>push 10 values</input>
      <label htmlFor='list' id='list' >List values are:</label>
      <button id='bt3' onClick={tsk3}>ADD Value</button>
    </div>

---

但是它没有处理代码，而是向我显示了不必要的类型错误

此错误发生的原因是，当void元素具有子元素或

危险的setinerhtml

属性时，会发生React。HTML元素（例如）是空元素，它们只是自动关闭的，没有任何内容。因此，如果为void元素设置了children或innerHTML属性，React将引发异常。 此外，代码中还存在语法错误。htmlFor属性设置或返回标签的for属性的值。htmlFor属性指定标签绑定到哪个表单元素，在您的情况下，哪个表单元素应该是“tsk”，即输入元素。因此，标签标签应该出现在输入标签之前，如下所示-

列表值为：
增值

正如错误所述-为什么要将子项添加到

？如果您使用React，为什么要使用本机DOM方法？@CertainPerformance我不知道我是React新手，但在此之前，我又编写了两个包含标记的脚本，它们工作得很好，但您能在我的代码所在的位置对其进行详细说明吗laging@CertainPerformance请做些我没有弄清楚的回答不清楚你想做什么。如果您正在尝试使用React，那么最好使用介绍性React教程—在使用React时不要使用DOM方法。

标记不能包含内容。它们可以有一个

值

属性，但

不能有任何“内部”内容。Thnx@Bidisha它实际上起作用了

标记不必是自动关闭的。在HTML中，

/>

被完全忽略。

function tsk3()
{
  let item = document.getElementById('tsk').value;
  var array =[1,];
  array.push(item);
  document.getElementById('list').innerHTML=array;
}