我有以下代码创建一个文本区域。
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?任何帮助将非常感激。
最佳答案
使用称为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}`
});
}
}
绑定(bind)到textMessage。
<textarea style={textAreaStyle} value={this.state.textMessage} />