在React中添加单选按钮时遇到问题 - 输入是空元素标签，既不能有“children”，也不能使用“dangerouslySetInnerHTML”。

Question

输入是一个空元素标签，不能有children并且不能使用dangerouslySetInnerHTML属性。

  render() {
    let radioid = this.props.radioid;
    return (
      <div className="row">
        {this.props.options.map(function(option) {
          return (
            <div key={radioid} className="column">
              <input type="radio" name={radioid} value={option}>
                <label>{option}</label>
              </input>
            </div>
          );
         })}
      </div>
    );
  }

例如，选项是像 A、B、C、D 这样的元素列表。

- Abdul

Answer 1

根据错误提示，输入标签(input)不应该有任何子标签，将标签(label)移出输入标签的结束标记即可。

根据错误提示，输入标签(input)不应该有任何子标签，将标签(label)移出输入标签的结束标记即可。

render() {
    let radioid = this.props.radioid;
    return (
        <div className="row">
        {this.props.options.map(function(option) {
            return (
            <div key={radioid} className="column">
                <label>{option}</label>
                <input type="radio" name={radioid} value={option}/>
            </div>
            );
        })}
        </div>
    );
}

- Anshul Bansal

Answer 2

你之所以出现错误，是因为jsx中的输入标签应该是自我关闭的，因此在返回之后，总是应该写入jsx脚本。

render() {
    let radioid = this.props.radioid;
    return (
        <div className="row">
        {this.props.options.map(function(option) {
            return (
            <div key={radioid} className="column">
                <label>{option}</label>
                <input type="radio" name={radioid} value={option}/>
            </div>
            );
        })}
        </div>
    );
}

- Jackob

Answer 3

在React中，输入框必须以单个标签结束，而不是像这样：

<input type="submit">Submit</input>

所以写

<input />

但是这可能会显示“提交查询”，所以需要编写。

<input value="Submit or login or whatever you like">

这就是你需要的 :)

- bolt_speed

Answer 4

HTML元素，例如<area />、<br />和<input />是空元素，它们只是自我关闭而没有任何内容。

因此，如果您为一个空元素设置了children或dangerouslySetInnerHTML属性，则React会抛出异常。

所以，不要这样写：

<div key={radioid} className="column">
   <input type="radio" name={radioid} value={option}>
      <label>{option}</label>
   </input>
</div>

请按如下方式编写：

<div key={radioid} className="column">
   <input type="radio" name={radioid} value={option}/>
       <label>{option}</label>
</div>

如果您喜欢这个答案，请点赞。

- pranav mishra

Answer 5

你应该使用自闭合的输入标签，例如：

<input className="card-field-input" placeholder="text"/>

- Sylraka

Answer 6

非常感谢！我解决了。

我有两个标签 "input"，一个是文本类型，一个是按钮，但只有第一个没有起作用。

- Michel Fonseca

---

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心中找到有关如何编写良好答案的更多信息。 - Community

如果您有新的问题，请通过单击提问按钮来询问。如果有助于提供上下文，请包含此问题的链接。-【来自审核】 - Dan Homola

Answer 7

在我的情况下，我在<Form.Control>调用中没有使用as='select'。所以React渲染了一个<input>而不是一个<select>，这是使用react-bootstrap时的一个常见问题。

<Form.Control as='select' >
    <option value="Buy">Buy</option>
    <option value="Sell">Sell</option>
</Form.Control>

- Francisco Gomes