在反应引导程序 Form.Control 中显示可编辑值

Question

我有一个引导程序输入，它呈现输入的onChange值列表。 如果用户从列表中选择一个值，我想在我的输入字段中显示它。 但它应该能够在必要时在输入字段上再次输入（选择另一个值）。 我正在使用 react-bootstrap，我的方法如下

searchConsumer = (e) => {
        const {consumer} = this.props;
        let consumerValue = e.target.value;
        const data = {
            "filterText": consumerValue,
            "page": 1,
            "maxRecords": this.state.maxRecords
        }
        consumer(data);
    }

selectConsumer(name){
        this.setState({
            selectedValue:name
        })
    }

    renderConsumerList(){
        const {consumers} = this.props;
        if(consumers.consumerData.length > 0) {
            return consumers.consumerData.map(item =>{
                return (
                <div className="consumer_search_item" onClick={()=>this.selectConsumer(item.name)}>{item.name}</div>
                )
            })
        }
    }

<Form.Control type="search" onChange={(e)=>this.searchConsumer(e)} value={consumers.consumerData.length > 0 ? selectedValue : ''} className="modal_input" placeholder="Search any consumer by name" required />

<div className="consumer_result_container">{this.renderConsumerList()}</div>

如果我从列表中选择一个值，我可以成功设置该值。 但是如果我想更改它，我无法更改它，因为该值已在输入字段中设置并且不允许我删除或编辑该值。 我该如何解决这个问题？

Answer 1

我认为当 onChange (searchConsumer) 被调用时会发生什么，输入的新值没有更新状态：

searchConsumer = ( e ) => {
    const { consumer } = this.props;
    let consumerValue = e.target.value;
    const data = {
        "filterText": consumerValue,
        "page": 1,
        "maxRecords": this.state.maxRecords
    }
    consumer( data );

    // Update state because new value is typed
    this.setState({
        inputValue: consumerValue
    })
}

Form.Control 值应反映状态：

<Form.Control type="search" onChange={ ( e ) => this.searchConsumer( e ) } value={ consumers.consumerData.length > 0 ? this.state.inputValue : '' }    />