时间戳

首页 > 解决方案 > PrimeReact 下拉菜单有问题

reactjs - PrimeReact 下拉菜单有问题

问题描述

我仍然是 React Js 的新手，最近我一直在使用 PrimeReact 进行开发。Forms 和 DataTables 对我来说做得很好，但我似乎无法弄清楚如何处理 Dropdown。我的状态由 redux 管理，在mapStateToProps我加载数据后，componentDidMount我可以console.log看到我的数据数组。通过正常的反应选择输入，我一直在使用以下代码：

const {accounttypes} = this.props;

    console.log(accounttypes)
    let typesOptions = accounttypes.length > 0
        && accounttypes.map((item, index) => {
            return (
                <option key={item.id } value={item.id}>{item.name}</option>
            )
        }, this);

这是一个选项，因为我可以发布到我的后端。但是，我想将 PrimeReact 用于我的所有表单，并且我一直在努力解决如何去做。以下是我的尝试，它让我头疼：

<div className="p-field p-col-12 p-md-4">
                <Dropdown
                  value={account_type}
                  optionValue = {accounttypes.id}
            
                  optionLabel = {accounttypes.name} 
                  options={accounttypes}

                  onChange={this.onTypeChange}
                  placeholder="Select an Acco"
                  autoFocus = {true}
                  editable={true}
                />
</div>

account_type是我的字段的名称，我的 django 模型引用了该accountytpe模型，并希望account_type在创建Account. 可以有人帮忙。并提前感谢

标签： reactjsprimereact

解决方案

optionLabel并且optionValue应该指向对象的等效属性。在你的情况下，我想正确的方法是这样

                  optionValue="id"
                  optionLabel="name"

推荐阅读