React/HTML 可编辑 Div 在内容更改后失去焦点

Question

我正在尝试创建一个自动换行的文本输入。默认的输入和文本区域块不适合我想要的样式，所以我求助于使用 contenteditable div。一切在桌面上都工作得很好，但在移动设备上却失败了。当用户聚焦 div 时，会清除初始占位符文本。这在移动设备上可以正常工作，键盘会弹出，但 div 会失去焦点，并且键盘不会在 div 中键入内容。如果再次单击该 div，它就会键入。我怎样才能解决这个问题？我附上了下面的代码。

const CustomTextEntry = ({placeholder}) => {
    const [text, setText] = useState(placeholder);

    const onFocus = (e) => {
        if (e.target.textContent == placeholder)
            e.target.textContent = "";
        setText(e.target.textContent);
    };

    const onBlur = (e) => {
        if (e.target.textContent == "")
            e.target.textContent = placeholder;
        setText(e.target.textContent);
    }

    const onInput = (e) => {
        if (e.nativeEvent.data == '\n')
            e.preventDefault();
    }

    return (
        <div
            contentEditable="true"
            suppressContentEditableWarning={true}
            onFocus={onFocus}
            onBlur={onBlur}
            onBeforeInput={onInput}
        >
            {placeholder}
        </div>
    )
}

Answer 1

这似乎是 IOS 独有的问题，但可以通过对 contentEditable div 使用 onClick 而不是 onFocus 来解决。