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

在引用和内容可编辑div出现问题之后，我使用draftJS代替了textarea或div

感谢Chayim的耐心和回答

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

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>
    );

  }
}

使用textarea显示可编辑的数据

2 个答案: