Question

我正在尝试创建一个下拉选择框，但使用我传递给组件的一些数据填充该下拉框中的列表项。我一直遇到＆＃34; Uncaught Invariant Violation：输入是一个void元素标记，不能有children或使用props.dangerouslySetInnerHTML。检查AssignModal的render方法。＆＃34;错误，我不知道如何解决它。这是我正在使用的代码：

在这个函数中，我试图动态生成下拉项

createUserDropdown: function() {
let items = [];

for (let i = 0; i < this.props.userData.user_data.length; i++) {
     items.push(<option key={this.props.userData.user_data[i].id} value={this.props.userData.user_data[i].id}>{this.props.userData.user_data[i].first_name}</option>);
}
 return items;
}

这是我的渲染功能

render: function() {
return (
<div>
  <form className='form-inline' onSubmit={this.handleSubmit}>
    <input type="select" label="Multiple Select" multiple>
       {this.createUserDropdown()}
    </input>
  </form>
</div>
)
}

Answer 1

选择不是有效的输入类型。选择实际拥有它自己的标签，它的孩子是选项。只需将<input>更改为<select>即可。更多信息：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select

Reactjs从道具数据中下拉列表填充

1 个答案: