div模拟input的placeholder属性

今天有做到这么一个需求，
一个div输入框，它模拟input输入框，并且也模拟input输入框的placeholder属性，但是现在这个placeholder属性值并不是唯一确定不变的。这个div输入框其实是一个类似微信朋友圈的回复输入框一样，当输入为空的时候，要显示给用户 @了谁，所以这个placeholder的内容是会变化的。

在网上查了几种方式，使用js操作代价太大，行内css又不支持伪类，下面我提供一种自认为最好的解决方式：
利用H5的data-属性：
react中

render() {
	return (
		<div class="input" data-text={variable}>