Как добавить текст в текстовую область, созданную в 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}/> 
     ); 
    } 

} 

Это полученное сообщение передается другим компонентом. Как я могу добавить полученное сообщение под другим в этой области? Любая помощь приветствуется.

Answer 1

Используйте состояние textMessage.

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

В компонентеWillReceiveProps добавить в текст сообщение.

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

Bind to textMessage.

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