React JSで作成したテキスト領域にテキストを追加するには？

Question

私はテキスト領域を作成する次のコードを持っています。

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を別のメッセージの下に追加するにはどうすればよいですか？どんな助けでも大歓迎です。

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

テキストメッセージにバインドします。

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