Question

我正在自下而上地创建文本编辑器。

我想给人一种幻想，即用户直接使用textarea。

因此，我认为将<div/>和<textarea>放在一个大的<p>中，并隐藏文本区域，并在<textarea>中显示<p>的值。当用户单击<p>中的单词时，将光标放在适当的文本区域中并输入单词在textarea中（<p>仅用于显示结果）

但是当我为此输入display: hidden时，我无法在textarea中输入任何内容。我如何向用户直接使用textarea展示错觉？

class CodeEditor extends Component {
  constructor(props) {
  super(props);

  this.state = {
    textValue: ''
    }
  }

  underline = () => {
    let textVal = this.editor;
    let Start = textVal.selectionStart;
    let End = textVal.selectionEnd;
    const oldState = this.state.textValue;
    if (oldState.substring(Start,End) !== '') {
      this.setState({textValue : oldState.substr(0,Start) + `<p style={{text-decoration-line:underline}}>` + oldState.substring(Start, End) + `</p>` + oldState.substr(End)})
    }
  };
  render() {
    const content = this.state.textValue;

    return (
      <div className={cx('text-editor')} onClick={() => 
         this.editor.focus()}>
        <textarea
          className={cx('text-input')}
          ref={ref => this.editor = ref}
          value={this.state.textValue}
          style={{display:'hidden'}}
          onChange={(event) => {
            this.setState({
              textValue:event.target.value
            });
          }} />
        <div className={cx('editor-buttons')}>
          <button onClick={this.underline}> Underline </button>
        </div>
        <p dangerouslySetInnerHTML={{ __html: content }} />
    </div>
 )};
}
export default CodeEditor;

Answer 1

您可以利用可内容编辑的html5功能： https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable

Answer 2

对于所有人都在寻找答案的方法，可以采用以下方法：

1）文本区域/输入具有边框，因此用border-style: none隐藏它，并在用textarea:focus, input:focus { outline: none; }聚焦时隐藏。

2）将背景颜色更改为与父组件相同。

3）完成：）

反应隐藏文本区域但可写

2 个答案: