Question

我正在尝试更新其他地方触发的事件的选项列表。我已经保存了状态中的选项，当我有更新的列表时，我使用setState来触发渲染但是选择框没有显示更新的列表

    constructor(props) {
        super(props);
        this.renderSelectField = this.renderSelectField.bind(this);
        this.renderTextField = this.renderTextField.bind(this);
        this.updateCommsMatrix = this.updateCommsMatrix.bind(this);
        this.renderSelect2Field = this.renderSelect2Field.bind(this);
        this.clearValue = this.clearValue.bind(this);
        this.updateValue = this.updateValue.bind(this);
        this.meta = {
            title: 'Request Exemption',
            description: 'This section allows you to request an exemption'
        };
        this.runOnce = false;
        this.state = {
            loaded: false,
            searchable: true,
            selectValue: 0,
            clearable: true,
            rtl: false,
            options: [
                { value: 0, label: 'All'}
                ]
        };
        this.exemptionType = {};
        this.markets = {};
        this.serviceDomain = {};
        this.servicesList = {};
        this.matrices = {};
    }

此部分抓取在选择

中设置的更新选项

    updateCommsMatrix(service_id){      

        if(service_id > 0){
            let self = this;
            this.props.fetchCommsmatricesByService(service_id)
            .then( response => {
                let data = response.payload.data.body.recordset.record;
                console.log(data);
                let options = self.populateOptionsObject(data, 'id', 'filename');
                options.unshift({ value: 0, label: 'All'});
                return options;
            })
            .then( options => this.setState({options:options}));
        }else{
            //select.append(<option value="0" key="0">All</option>);
        }
    }

    populateOptionsObject(options, key, value) {
        return options.map((option, index) => (
                {value : option[key], label: option[value] }
        ));
    }

下面的

是呈现表单的部分

    populateOptions(options, key, value) {
        return options.map((option, index) => (
            <option key={option.id} value={option[key]}>
                {option[value]}
            </option>
        ));
    }

    clearValue (e) {
        this.select.setInputValue('');
    }

    updateValue (newValue) {
        this.setState({
            selectValue: newValue,
        });
    }

    renderSelect2Field(field){
        let id = "select_" + field.input.name;
        let options = this.state.options;
        return(
                <div className="form-group">
                    <label className="control-label col-sm-2">{field.label}</label>
                    <div className="col-sm-4">
                        <Select
                            id={id}
                            //className="col-sm-6"
                            ref={(ref) => { this.select = ref; }}
                            onBlurResetsInput={false}
                            onSelectResetsInput={false}
                            autoFocus
                            options={options} //on load this has 1 value (value=0, display text =All)
                            simpleValue
                            clearable={this.state.clearable}
                            name={field.input.name}
                            //disabled={this.state.disabled}
                            value={this.state.selectValue}
                            onChange={this.updateValue}
                            rtl={this.state.rtl}
                            searchable={this.state.searchable}
                        />
                    </div>
                </div>
        );
    }

    render() {
        console.log(this);
        if (!this.runOnce && this.props.isReady) {
            this.runOnce = true;
            this.initData();
        }
        const { handleSubmit } = this.props;
        let form = 'Loading...';
        if (this.state.loaded) {
            return (
                <div className="container-fluid">
                    <form onSubmit={handleSubmit} className="form-horizontal">
                        <Field
                            label="Comms Matrix"
                            loadFrom="matrices"
                            name="comms_matrix_id"
                            component={this.renderSelect2Field}
                            type="select"
                        />
                        <button
                            type="submit"
                            className="btn btn-vodafone hidden-print"
                        >
                            Submit
                        </button>
                    </form>
                </div>
            );
        }

        return <div className="container-fluid">{form}</div>;
    }
}

我可以使用单个选项加载init load上的选择框。我想使用updateCommsMatrix添加/更改选项列表，您可以看到我正在设置选择中使用的状态。

我也尝试了Async选项，但是我无法让显示器显示所选值，当我点击下拉列表时，它直到我点击{{1}才显示新列表}。使用此方法，我将spacebar存储在object我已从here

中采用此示例

ASYNC

this.state.selectValue

在我看来，当我选择一个值时，传入<Async name={field.input.name} multi={false} value={this.state.selectValue} onChange={this.updateValue} valueKey="value" labelKey="label" loadOptions={this.getCommsmatrices} onValueClick={this.gotoCommsmatrix} cache={false} isLoading={this.state.isLoading} /> getCommsmatrices (input, callback) { input = input.toLowerCase(); let options = this.state.options.filter(i => { return i.label.toLowerCase().includes(input) == true; //return i.label.toLowerCase().substr(0, input.length) === input; }); let data = { options: options,//.slice(0, MAX_CONTRIBUTORS), complete: true //options.length <= MAX_CONTRIBUTORS, }; setTimeout(function() { callback(null, data); }, ASYNC_DELAY); } gotoCommsmatrix (value, event) { if(value.value > 0){ window.open(window.top.protocol + '://' + window.top.hostname + '/api/user/commsmatrix/id/'+value.value+'/format/xml'); } }的输入是空白

Answer 1

从我的角度来看，代码本来应该是非常复杂的。如果您使用组件props变量（它是一个数组），并且将基于react-select中的该变量来呈现所有选项，则它将起作用，因为更改props将重新呈现组件，并且将更改反应选择。

Example不是用于反应选择，而是同样可以。

如何更新react select或react-select.async

1 个答案: