javascript - 无法更新具有状态的 React 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 并输入内容时，它什么也不做。

如何手动添加文本？

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);
}