正在编写JS以存储10个值但类型错误:input是一个void元素标记，既不能有"children"

Question

i正在React中编写一个JavaScript函数，用于向数组添加10个值这10个要从Html输入字段中存储的值因此，我所做的是添加id为"tsk"的输入字段和按钮"bt3"，因此每当按下按钮时，它都会运行一个js脚本，该脚本会获取输入字段"tsk"的值，并将其推送到js中的空数组中所以每次我按下按钮，字段中的值都会被推到数组中并使用innerHTML方法提示标签"列表">

在这里，我对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>

这里有相应的js来运行它

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

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

Answer 1

出现此错误是因为在React中，当void元素具有子元素或dangerouslySetInnerHTML道具时。诸如之类的HTML元素是void元素，它们只是自动关闭的，没有任何内容。因此，如果为void元素设置children或innerHTML属性，React将抛出异常。此外，您的代码中也存在语法错误。htmlFor属性设置或返回标签的for属性的值。htmlFor属性指定标签绑定到哪个表单元素，在您的情况下应该是"tsk"，即输入元素。因此，标签标签应该出现在输入标签之前，类似于下面的

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

另外请注意，输入必须是一个自关闭标签。