Реакция Textarea с состоянием не может быть обновлена

Question

Я работаю над приложением ReactJs.Здесь у меня есть Textarea, который подключен к state

<Textarea className="c-input" tabIndex="7" minRows={4}
    ref="adMessage"
    onKeyPress={ console.log('keypress textarea') }
    onChange={ console.log('changed text area') }
    placeholder=""
    value={this.state.adDescription}
/>

В другом контроллере, у меня есть некоторые теги, и по щелчку я могу обновить состояние adDescription следующим образом

handelSetDescription = (label) => {

        let message = '';

        if (this.state.adDescription.length === 0){

            message = this.state.adDescription + label;

        } else if (this.state.adDescription.length > 0){

            message = this.state.adDescription + ", " + label;
        }

        this.setState({
            adDescription: message
        });

    };

Но я хочу вручную добавить больше текста в Textarea, но, похоже, я не могу добавить туда никакого текста.Когда я нажимаю на Textarea и набираю что-то, оно просто ничего не делает.

Как добавить туда текст вручную? Не получая прямого ответа после нескольких поисков.

СпасибоAriful

Answer 1

Попробуйте сделать что-то подобное в соответствии с вашей бизнес-логикой.

<Textarea className="c-input" tabIndex="7" minRows={4}
ref="adMessage"
onKeyPress={ console.log('keypress textarea') }
onChange={ this.someFunctionName }
placeholder=""
value={this.state.adDescription}

/>

Функция может делать что-то вроде следующего:

changeStateForDescription = (val) => {
   this.setState({
        adDescription: val
    });
}

handelSetDescription = (label) => {

    let message = '';

    if (this.state.adDescription.length === 0){

        message = this.state.adDescription + label;

    } else if (this.state.adDescription.length > 0){

        message = this.state.adDescription + ", " + label;
    }

    this.changeStateForDescription(message);

};

someFunctionName = (e) => {
 this.changeStateForDescription(this.state.adDescription + e.target.value);
}