javascript - 模仿div中的textarea

Question

我正在尝试使用 React 构建一个用于突出显示文本的组件。

为了做到这一点，我在同一层级有一个textarea元素和一个div，将textarea的值复制到div中。我的代码如下。

textarea 在 TextArea 组件内，div 在 HighlightedDiv 组件内。

我刚刚发现 div 处理换行符和空格的方式与它们在文本区域中的处理方式不同。所以当我在textarea中输入多个空格时，div只显示一个空格。当我在文本区域内按下回车键时，div 中的文本保持在同一行。

在某处我发现将其添加到 div 的 css 样式修复了:

white-space: pre;

确实如此，但现在我还希望我的文本在碰到 div 的边界时继续换行，就像我使用以下 css 时一样:

white-space: normal;
word-wrap: break-word;

显然，问题是我同时需要 white-space: pre 和 white-space: normal。说得再清楚不过了，这是不可能的。

有谁知道另一种方法可以达到我想要的效果吗？

我的代码:

(我使用的是 s 样式库，样式组件，所以下面的 StyledTextArea 和 Div 元素分别只是一个普通的 textarea 和 div。)

HighlightTextArea(父级):

import React, { Component } from 'react'
import styled from 'styled-components'

import HighlightDiv from './HighlightDiv'
import TextArea from './TextArea'

const Container = styled.div`
  border: 1px green solid;
  width: 100vh;
  padding: 20px;
`


export default class HighlightTextArea extends Component {
  constructor() {
    super()
    this.state = {
      text: ''
    }
  }
  setHighlightTextAreaState = (newStateObject) => {
    for (let key in newStateObject) {
      this.setState({ [key]: newStateObject[key] })
    }
  }
  render() {
    return (
      <Container>
        <TextArea setHighlightTextAreaState={this.setHighlightTextAreaState}/>
        <HighlightDiv text={this.state.text}/>
      </Container>
    );
  }
}

文本区域(子):

import React, { Component } from 'react'
import styled from 'styled-components'

const StyledTextArea = styled.textarea`
  border: 1px solid blue;
  font-family: 'Inconsolata', monospace;
  font-size: 1rem;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 20;
  color: blue;
  opacity: 0.5;
`

export default class TextArea extends Component {
  constructor(props) {
    super(props)
  }
  handleChange = (event) => {
    console.log("TextArea.handleChange - event.target.value:")
    console.log("\"" + event.target.value + "\"")
    console.log("TextArea.handleChange - event.target.value.length: " + event.target.value.length)
    this.props.setHighlightTextAreaState({
      text: event.target.value,
    })
  }
  // componentDidMount() {
  //   let textAreaRect = document.getElementById("text-area").getBoundingClientRect()
  //
  // }
  render() {
    return (
      <StyledTextArea id="text-area" onChange={this.handleChange}></StyledTextArea>
    );
  }
}

HighlightDiv(子):

import React, { Component } from 'react'
import styled from 'styled-components'

const Div = styled.div`
  border: 1px solid red;
  font-family: 'Inconsolata', monospace;
  font-size: 1rem;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  color: red;
  text-align: left;
  white-space: normal;
  word-wrap: break-word;
`


export default class HighlightDiv extends Component {
  constructor(props) {
    super(props)
  }
  renderTextHtml = () => {
    // Loop over all characters in this.props.text
    // Check if character is space or enter
  }
  render() {
    return (
      <Div>
        {this.props.text}
      </Div>
    )
  }
}

Answer 1

你应该使用white-space: pre-wrap;

堆栈片段 - 并排 div/textarea

div {
  white-space: pre-wrap;
}


/* for the purpose of this demo */
div, textarea {
  display: inline-block;
  vertical-align: top;
  width: 220px;
  height: 220px;
  font-size: 16px;
  font-family: arial;
  overflow: hidden;
}

<div>But ere she from the church-door stepped She smiled and told us why:
  
    'It was a wicked woman's curse,' Quoth she, 'and what care I?'
     
She smiled, and smiled, and passed it off Ere from the door she stept
</div>

<textarea>But ere she from the church-door stepped She smiled and told us why:
  
    'It was a wicked woman's curse,' Quoth she, 'and what care I?'
     
She smiled, and smiled, and passed it off Ere from the door she stept
</textarea>