我创建了一个仅显示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 关注
- 81 浏览
添加回答
举报
0/150
提交
取消