Jquery 引导/反应-使用数组填充选择选项

我正在尝试使用Jquery填充下拉列表的选项列表。但是，下面的代码没有按预期填充选项

class MyClass extends React.Component {
render() {
        return (
//blah blah
<select id="pm-list" className="form-control" defaultValue={this.state.selectedApprover} onChange={(event) => this.state.selectedApprover = event.target.options[event.target.selectedIndex].value}>
    {(() => {
        for (var i = 0; i < this.state.approvers.length; i++) {
            $('#pm-list').append('<option value=' + this.state.approvers[i] + '>' + this.state.approvers[i] + '</option>');
        }
    })()}
</select>
)};
}

但这背后的理由是什么

我对改进代码的建议

onChange

函数使用

this.setState（）

而不是

this.state.selectedApprover=

您必须在

componentDidMount

函数中编写

jquery

内容

主要问题为什么要使用

jquery

？您可以使用

jsx

表达式简单地实现这一点

试试这个：

<select id="pm-list" className="form-control" defaultValue={this.state.selectedApprover} onChange={(event) => this.setState({selectedApprover: event.target.value})>
    {() => {
        return this.state.approvers.map((approver) => {
            return (
                <option value="{approver}">{approver}</option>
            )
        })
    }
</select>

this.setState（{selectedApprover:event.target.value}）>
{() => {
返回此.state.approvers.map（（approver）=>{
返回(
{批准人}
)
})
}

您能够链接完整的组件代码吗？在使用ReactThank时，您不需要jquery进行此类操作。在阅读您的答案之前，我就意识到了您的第2点。但我无论如何都会接受。关于您的第3点，您能展示一些示例代码吗？

<select id="pm-list" className="form-control" defaultValue={this.state.selectedApprover} onChange={(event) => this.setState({selectedApprover: event.target.value})>
    {() => {
        return this.state.approvers.map((approver) => {
            return (
                <option value="{approver}">{approver}</option>
            )
        })
    }
</select>