Отобразить редактируемое значение в реаги bootstrap Form.Control - PullRequest
Новая
       70

Отобразить редактируемое значение в реаги bootstrap Form.Control

0 голосов
/ 27 февраля 2020

У меня есть bootstrap вход, который отображает список значений onChange ввода. И если пользователь выбирает значение из списка, я хочу показать его в моем поле ввода. Но он должен иметь возможность вводить снова в поле ввода при необходимости (чтобы выбрать другое значение). Я использую response- 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>

Я могу установить значение успешно, если я выберу значение из списка. Но если я хочу изменить это, я не могу изменить это, потому что значение уже установлено в поле ввода и не позволяет мне удалять или редактировать значение. Как я могу решить эту проблему?

1 Ответ

1 голос
/ 27 февраля 2020

Я думаю, что происходит, когда вызывается 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 : '' }    />
...