如何使用reactjs获取整个数据块？

Question

我创建了一个只显示block[0]值的组件，它没有显示整个块值。

例如，如果我写：

HI

Stackoverflow

它只显示"Hi" ，它没有显示该字段的全部内容。

任何人都可以帮助我获取我在该输入字段中写入的所有数据吗？

import React from "react";
import { Editor } from "react-draft-wysiwyg";
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
export default class Edit extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    return (
      <div>
        <Editor value={this.props.value} onChange={this.props.onChange} />
      </div>
    );
  }
}

应用组件：

import React from "react";
import Body from "./Body";
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      body: ""
    };
  }
  changeBodyHandler = value => {
    console.log(value.blocks[0].text);
    this.setState({
      body: value.blocks[0].text
    });
  };

  render() {
    return (
      <div>
        <Body
          label="Body"
          name="body"
          value={this.state.body}
          onChange={this.changeBodyHandler}
        />
      </div>
    );
  }
}
export default App;

这是整个代码：

“ https://codesandbox.io/s/compassionate-tereshkova-89fm2 ”

任何人都可以帮我解决这个问题吗？

Answer 1

要列出的每一行，然后map() ， join()与\\n就可以了

this.setState({ body: value.blocks.map(x => x.text).join("\n") });

import React from "react";
import Body from "./Body";
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      body: ""
    };
  }
  changeBodyHandler = value => {
    this.setState({ body: value.blocks.map(x => x.text).join("\n") });
  };
  render() {
    console.log(this.state.body);
    return (
      <div>
        <Body
          label="Body"
          name="body"
          value={this.state.body}
          onChange={this.changeBodyHandler}
        />
      </div>
    );
  }
}
export default App;

在线试一下：

Answer 2

如果您希望像在编辑器中一样使用断行，请在连接时添加<p>标记。

 changeBodyHandler = value => { let data =value.block; let text = ""; data.map(index => { text = text +"<p>" +index.text+"</p>"; }); this.setState({ body: text }); };

如果您想以相同的方式显示数据，请使用dangerouslySetInnerHTML
```
 <div dangerouslySetInnerHTML={{__html: this.state.body}} />
```

如何使用reactjs获取整个数据块？

问题描述

2 个解决方案

解决方案1
1 已采纳 2020-03-21 06:00:11

解决方案2
0 2020-03-21 05:57:14

如何使用reactjs获取整个数据块？

问题描述

2 个解决方案

解决方案1 1 已采纳 2020-03-21 06:00:11

解决方案2 0 2020-03-21 05:57:14

解决方案1
1 已采纳 2020-03-21 06:00:11

解决方案2
0 2020-03-21 05:57:14