React-Select：如何在选定值 onChange 上更新选定选项下拉列表的默认值？

Question

以下 class 应该处理两个下拉列表（使用反应选择）组件的值更改。

当我 select 不同的下拉选项时，如何更新下拉菜单的默认显示值？ 按照目前的情况，select 下拉选项不会改变？

我试过this.defaultValue = option.value并且没有观察到下拉选择值的任何变化。

handleOwnerChange = (option) => {
    this.setState({selectedOwnerId: option.value});
    this.defaultValue = option.value;
    return option;
}
handleApproverChange = (option) => {
    this.setState({selectedApproverId: option.value});
    this.defaultValue = option.value;
    return option;
}

请指教。

import React from 'react';
import Select from 'react-select';
import { riskValue, formatName } from '../../common/Functions';
import './EditRisk.css';

export class EditRiskSummary extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedOwnerId: this.props.data.risk.ownerid,
            selectedApproverId: this.props.data.risk.approverid
        }
    }
    handleOwnerChange = (option) => {
        this.setState({selectedOwnerId: option.value});
        this.defaultValue = option.value;
        return option;
    }
    handleApproverChange = (option) => {
        this.setState({selectedApproverId: option.value});
        this.defaultValue = option.value;
        return option;
    }
    componentDidUpdate(e) {
        let ownerChanged = this.state.selectedOwnerId !== e.data.risk.ownerid;
        let approverChanged = this.state.selectedApproverId !== e.data.risk.approverid;
        this.state = {
            selectedOwnerId: e.data.risk.ownerid,
            selectedApproverId: e.data.risk.approverid
        }
        return ownerChanged || approverChanged;
    }
    
    render() {
        return (
            <div className="tbl layout" id="summary">
                <div className="tr">
                    <div className="td label">Risk #</div>
                    <div className="td">{this.props.data.risk.riskid} [<a href="" onClick="ctrl.getRiskReport()">Risk Summary</a>]</div>
                    <div className="td label">
                        Current Risk
                    </div>
                    <div className="td {this.props.risk.currentlevel}">
                        {riskValue(this.props.data.risk.currentlevel, this.props.data.risk.currentlikelihood, this.props.data.risk.currentconsequence)}
                    </div>
                </div>   
                <div className="tr">
                    <div className="td label">        
                        Creator
                    </div>
                    <div className="td">
                        Admin
                    </div>
                    <div className="td label">
                        Risk State
                    </div>
                    <div className="td">
                        {this.props.data.risk.riskstate}
                    </div>
                </div>      
                <div className="tr">
                    <div className="td label">
                        Owner
                    </div>
                    <div className="td">
                        <Select value={this.props.data.users.filter(option => option.value === this.props.data.risk.ownerid)} 
                                options={this.props.data.users} 
                                onChange={this.handleOwnerChange.bind(this)} />
                    </div>
                    <div className="td label">
                        Risk Approver
                    </div>
                    <div className="td">
                        <Select value={this.props.data.users.filter(option => option.value === this.props.data.risk.approverid)} 
                                options={this.props.data.users} 
                                onChange={this.handleApproverChange.bind(this)} />
                    </div>
                </div>
            </div>
        );
    }
}

Answer 1

看起来我不得不直接修改我的道具的内部属性，即 risk.ownerid 和 risk.approverid，到选项值，以便我的 select 选项的过滤器会选择适当的值，因为 select 选项取决于对象的 data.users 列表用户。

依赖于控制用户列表的过滤谓词的风险道具有效地解决了我的问题。 现在导航到其他风险获取适当的用户并手动更改用户更新 select 选项直到导航离开和返回发生，从而重新获取下拉列表的原始用户。

value={this.props.data.users.filter(option => option.value === this.props.data.risk.ownerid)}

value={this.props.data.users.filter(option => option.value === this.props.data.risk.approverid)}

handleOwnerChange = (option) => {
    this.setState({selectedOwnerId: option.value});
    this.props.data.risk.ownerid = option.value;
}
handleApproverChange = (option) => {
    this.setState({selectedApproverId: option.value});
    this.props.data.risk.approverid = option.value;
}