Javascript 在react引导窗体中显示可编辑值。控件

我有一个引导输入，它呈现输入的值

onChange

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

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>

searchConsumer=（e）=>{
const{consumer}=this.props；
让consumerValue=e.target.value；
常数数据={
“filterText”：消费者价值，
“页码”：1，
“maxRecords”：this.state.maxRecords
}
消费者（数据）；
}
选择消费者（姓名）{
这是我的国家({
selectedValue:名称
})
}
renderConsumerList（）{
const{consumers}=this.props；
如果（consumers.consumerData.length>0）{
返回consumers.consumerData.map（项=>{
返回(
this.selectConsumer（item.name）}>{item.name}
)
})
}
}
this.searchConsumer（e）}value={consumers.consumerData.length>0？selectedValue:'}className=“modal_input”placeholder=“按名称搜索任何消费者”必填项/>
{this.renderConsumerList（）}

---

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

我认为在调用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 type="search" onChange={ ( e ) => this.searchConsumer( e ) } value={ consumers.consumerData.length > 0 ? this.state.inputValue : '' }    />

this.searchConsumer（e）}value={consumers.consumerData.length>0？this.state.inputValue:'}/>

是的，就是这样。谢谢