我创建了一个仅显示block[0]值的组件，它不显示整个 block 值。
例如，如果我写:
HI
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>
<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 "
有人可以帮我解决这个问题吗？
最佳答案
列出每一行，然后使用 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;
在线尝试:
关于javascript - 如何使用reactjs获取整个数据 block ？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60715435/