Question

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

但这背后的理由是什么呢？

Answer 1

我建议改进代码

onChange功能使用this.setState()代替this.state.selectedApprover =
您必须在jquery函数内编写componentDidMount个内容。
主要事情为何使用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>

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

1 个答案:

我建议改进代码