用div实现一个文字输入框

实现代码

import React, { useRef } from 'react';
import styles from './index.less';

const TextArea: React.FC<any> = (props) => {
    const myRef = useRef<any>(0);

    return <div className={styles.box}>
        <div className={styles.areaTitle}>
            <span className={styles.label}>处理结果</span>（请谨慎填写，消费者可看到该信息）
        </div>
        <div
            ref={(ref) => {
                myRef.current = ref;
            }}
            className={styles.textArea}
            contentEditable="true"
            placeholder="请输入内容"
            onInput={() => {
                props.onChange(myRef.current.innerHTML);
            }} />
    </div>
}

export default TextArea;

.label{
    color: #595959;
}

.areaTitle{
    margin-bottom: 10px;
}


.box{
    width: 560px;
    height: 126px;
    background: #F6F6F6;
    border-radius: 8px;
    padding: 14px;
}

.textArea{
    overflow-y: auto;
    height: 70px;
    span{
        background: #F6F6F6 !important;
    }
    &:focus-visible {
        outline: -webkit-focus-ring-color auto 0;
    }
    &:empty:before {
        content: attr(placeholder);
        color: #BFBFBF;
    }
}

储备知识

伪元素和:empty

p::before {
  content: '卡卡1';
}

p:empty::before {
  content: '卡卡2';
}

p {
  color: silver;
}

p:empty {
  color: red;
}

<p></p>
<p> </p>

案例中P元素使用伪类元素生成 ‘卡卡1’，可以从第一行的P标签可以看出内容不被:empty伪类认可，P元素依然认为他是一个空元素，所以这里渲染卡卡2。
第二行P元素里面有空格内容，此时渲染的就是卡卡1。

:empty选择器 - 掘金 (juejin.cn)