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

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

例如，如果我写：

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>

</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 ”

谁能帮我解决这个问题吗？

绝地无双

浏览 86回答 2

2回答

猛跑小猪

列出每一行，然后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;

HUX布斯

如果您想要像编辑器中那样使用断线，请<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}} />

随时随地看视频慕课网APP