来自地图数组的无线电输入

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，并在label 上设置htmlFor 属性。