如何将文本附加到在 React JS 中创建的文本区域？答案

【问题标题】：How to append text to text area created in React JS?如何将文本附加到在 React JS 中创建的文本区域？
【发布时间】：2016-09-27 05:47:25
【问题描述】：

我有以下创建文本区域的代码。

interface IReceiverProps {
    receivedMessage: string;
    topic: string;
}

export default class Receiver extends React.Component<IReceiverProps, {}> {

    render() {
        var textAreaStyle = {
            width: 1300,
            height: 450,
            border: '3px solid #cccccc',
            padding: '5px',
            fontFamily: 'Tahoma, sans-serif',
            overflow: 'auto',
            marginLeft: '10px'
        }
        return (
            <textarea style={textAreaStyle} value={this.props.receivedMessage}/>
        );
    }

}

这个收到的消息是由另一个组件传递的。如何在此文本区域中将 receivedMessage 附加到另一个下方？任何帮助将不胜感激。

【问题讨论】：

一些工作代码？ jsfiddle 还是 jsbin？
依赖项很少，所以很难得到它。在上面的代码中，我只是将收到的消息添加到文本区域的值中。这显然会每次都替换消息。那么这个应该怎么处理呢？我怎样才能附加它？
如何在textarea 下使用div 并保存发送组合数据？

标签： javascript reactjs typescript textarea

【解决方案1】：

使用名为 textMessage 的状态。

constructor(props) {
  super(props);
  this.state = {
    textMessage: props.receivedMessage
  };
}

在 componentWillReceiveProps 中，追加到 textMessage。

componentWillReceiveProps(nextProps) {
  if (nextProps.receivedMessage !== this.props.receivedMessage) {
    this.setState({
      textMessage: `${this.state.textMessage}\n{nextProps.receivedMessage}`
    });
  }
}

绑定到 textMessage。

<textarea style={textAreaStyle} value={this.state.textMessage} />

【讨论】：

我猜这个有问题。这将在每次更改时递归插入文本。有人请确认..
@vijayst 如果为道具收到相同的值，这将不起作用，不是吗？我尝试删除条件 "if (nextProps.receivedMessage !== this.props.receivedMessage) {" 但仍然没有帮助。收到相同的值时，不会调用“componentWillReceiveProps”。应该怎么处理？
将文本包裹在一个对象中。 received={{ message: 'your message' }}