javascript - How to append text to text area created in React JS? - Stack Overflow

admin管理员组

文章数量:1392088

I have the following code which creates a text area.

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

}

This received message is passed by another ponent. How can I append the receivedMessage one below another in this text area? Any help would be much appreciated.

I have the following code which creates a text area.

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

}

This received message is passed by another ponent. How can I append the receivedMessage one below another in this text area? Any help would be much appreciated.

• javascript
• reactjs
• typescript
• textarea

Share Improve this question Follow asked Sep 27, 2016 at 5:47 AnOldSoulAnOldSoul 4,2071414 gold badges6767 silver badges136136 bronze badges 3

• some working code? jsfiddle or jsbin? – Fazal Rasel Commented Sep 27, 2016 at 5:55
• There are few dependencies so its hard to get it there. In the above code, I'm just adding the received message to value of text area. This obviously will replace the message everytime. So how should this be handled? How can I append it? – AnOldSoul Commented Sep 27, 2016 at 6:13
• how about using a div under textarea and on saving sending bined data? – Fazal Rasel Commented Sep 27, 2016 at 6:20

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

Use a state called textMessage.

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

In ponentWillReceiveProps, append to textMessage.

ponentWillReceiveProps(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} />

本文标签： javascriptHow to append text to text area created in React JSStack Overflow