第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機(jī)立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何使用reactjs獲取整個數(shù)據(jù)塊?

如何使用reactjs獲取整個數(shù)據(jù)塊?

qq_花開花謝_0 2022-05-22 10:34:36
我創(chuàng)建了一個只顯示block[0]值的組件,它不顯示整個塊值。例如,如果我寫:HIStackoverflow它只顯示"Hi",不顯示該字段的全部內(nèi)容。任何人都可以幫助我獲取我在該輸入字段中寫入的全部數(shù)據(jù)嗎?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>    );  }}應(yīng)用組件: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 ”
查看完整描述

2 回答

?
蕭十郎

TA貢獻(xiàn)1815條經(jīng)驗 獲得超13個贊

然后列出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;

http://img1.sycdn.imooc.com//6289a16d000106ba11830651.jpg

查看完整回答
反對 回復(fù) 2022-05-22
?
慕工程0101907

TA貢獻(xiàn)1887條經(jīng)驗 獲得超5個贊

如果您想像在編輯器中那樣使用換行符,請在連接時添加<p>標(biāo)簽。


 changeBodyHandler = value => {

  let data =value.block;

  let text = "";


  data.map(index => {

  text = text +"<p>" +index.text+"</p>";

 });

  this.setState({

    body: text

  });

 };

如果您想以相同的方式顯示數(shù)據(jù),請使用dangerouslySetInnerHTML


 <div dangerouslySetInnerHTML={{__html: this.state.body}} />


查看完整回答
反對 回復(fù) 2022-05-22
  • 2 回答
  • 0 關(guān)注
  • 144 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號