我創建了一個僅顯示block[0]值的組件，它不顯示整個塊值。例如，如果我寫：HIStackoverflow它只是顯示"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 ”誰能幫我解決這個問題嗎？
2 回答
猛跑小豬
TA貢獻1858條經驗 獲得超8個贊
列出每一行，然后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布斯
TA貢獻1876條經驗 獲得超6個贊
如果您想要像編輯器中那樣使用斷線，請<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}} />
- 2 回答
- 0 關注
- 118 瀏覽
添加回答
舉報
0/150
提交
取消