如何使用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