时间戳

首页 > 解决方案 > Bootstrap/React - 使用数组填充选择选项

jquery - Bootstrap/React - 使用数组填充选择选项

问题描述

我正在尝试使用 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>
)};
}

大概是我用错地方了吧？

更新

将 Jquery 片段放入componentDidMount.

componentDidMount() {
    //blah blah
    for (var i = 0; i < this.state.approvers.length; i++) {
        $('#pm-list').append('<option value=' + this.state.approvers[i].NtId + '>' + this.state.approvers[i].FullName + '</option>');
    }
};

但是，这背后的基本原理是什么？

标签： jquerytwitter-bootstrapreactjs

解决方案

我对改进代码的建议

  1. onChange函数使用this.setState()而不是this.state.selectedApprover =
  2. 你必须在函数jquery里面写东西。componentDidMount
  3. 主要的事情为什么要使用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>

推荐阅读