Question

我正在尝试构建一个半径为映射数组生成的选项的表单，但是会出现以下错误：

未捕获的错误：输入是一个空元素标记，既不能具有children也不能使用dangerouslySetInnerHTML。

下面的代码用于渲染组件React：

<form>
    <p>{this.state.current_statement}</p>
    <div>
        {this.state.current_alternative.map(item => (
            <input key={item.id} type="radio">
                <label>{item.content}</label>
            </input>
        ))}
    </div>
    <div>
        <button type="submit">Submit</button>
    </div>
</form>

Answer 1

输入是一个空元素标签

<input>元素不允许有子元素。您已将<label>元素放入输入中。 React抱怨说这是因为尽管浏览器仍然可以显示它，但不允许这样做。您需要在输入旁边而不是在输入旁边呈现标签：

{this.state.current_alternative.map(item => (
     <React.Fragment>
         <label htmlFor={item.id}>{item.content}</label>
         <input name="someName" key={item.id} id={item.id} type="radio" />
     </React.Fragment>
))}

为此，您需要将map()回调返回的元素包装到Fragment或类似<div>的容器组件中。这样做的原因是回调必须返回单个值，例如您可以使用Fragment实现的单个节点。

要将标签与输入相关联，请为输入分配一个id并在htmlFor上设置一个label属性。

地图阵列的无线电输入

1 个答案: