html - 使用 textarea 显示可编辑数据

Question

我正在尝试使用以下代码制作可编辑的内容

class RuleDescriptionViewAdmin extends Component {
render(){

    var rule = this.props.rule.description;
    console.log(rule);
    return(
    <div>
    <Col smOffset={2} mdOffset={1}>
    <PageHeader>
        {this.props.rule.title}
    </PageHeader>
    </Col>
    <textarea>
        {rule.split('\n').map((item, key) => {
          return <span key={key}><Col smOffset={2} mdOffset={1} sm={6}>{item}</Col><br/></span>
          })}
    </textarea>

     </div>
    );

    }
}

我收到以下错误

textarea 最多只能有一个孩子。

有没有更好的方法可以使这个可编辑？

编辑：我添加了以下代码

<div contentEditable="true" ref={this.divRef}>
        {rule.split('\n').map((item, key) => {
return <span key={key}><Col smOffset={2} mdOffset={1} sm={6}>{item}</Col><br/></span>
    })}
</div>

handleOnClick我正在尝试这样做

var text = this.divRef.current.innerText;

Answer 1

尝试<div contenteditable="true">代替<textarea>.

Answer 2

在 refs 和内容可编辑 div 出现问题后，我使用 DraftJS 而不是 textarea 或 div

感谢 Chayim 的耐心和答案

以防万一有人用同样的问题检查这个问题，这是我用来用 DraftJS 显示可编辑文本的代码。

class RuleDescriptionViewAdmin extends Component {
constructor(props,context){
    super(props,context);
    this.handleOnClick = this.handleOnClick.bind(this);

    const processedHTML = DraftPasteProcessor.processHTML(this.props.rule.description.replace(/\n/g, "<br />"));
    const contentState = ContentState.createFromBlockArray(processedHTML); 
    var editorState = EditorState.createWithContent(contentState);
    var editorState = EditorState.moveFocusToEnd(editorState);
    this.state = {editorState: editorState};
    this.onChange = (editorState) => this.setState({editorState});
}



handleOnClick(event) {
  var url = 'http://localhost:8080/rules/' + this.props.rule.id;
  const blocks =  convertToRaw(this.state.editorState.getCurrentContent()).blocks;
  const value = blocks.map(block => (!block.text.trim() && '\n') ||   block.text).join('\n');
  //do something with value

} 

render(){

    return(
    <div>
    <Col smOffset={2} mdOffset={1}>
    <PageHeader>
        {this.props.rule.title}
    </PageHeader>
    <Editor
      editorState={this.state.editorState}
      onChange={this.onChange}
    />
    </Col>

     <Col smOffset={2} mdOffset={1}>
    <Button onClick = {this.handleOnClick}>Update rule</Button>
    </Col>
    </div>
    );

  }
}