我创建了一个只显示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贡献1815条经验 获得超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;
慕工程0101907
TA贡献1887条经验 获得超5个赞
如果您想像在编辑器中那样使用换行符，请在连接时添加<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}} />
添加回答
举报
0/150
提交
取消