用文本区显示可编辑的数据
用文本区显示可编辑的数据
提问于 2018-07-16 13:48:18
我正在尝试使用以下代码使某些内容可编辑
class RuleDescriptionViewAdmin extends Component {
render(){
var rule = this.props.rule.description;
console.log(rule);
return(
<div>
<Col smOffset={2} mdOffset={1}>
<PageHeader>
{this.props.rule.title}
</PageHeader>
</Col>
<textarea>
{rule.split('\n').map((item, key) => {
return <span key={key}><Col smOffset={2} mdOffset={1} sm={6}>{item}</Col><br/></span>
})}
</textarea>
</div>
);
}
}我得到了下面的错误
文本区域最多只能有一个子级。
有没有更好的方法让它变得可编辑？
编辑:我添加了以下代码
<div contentEditable="true" ref={this.divRef}>
{rule.split('\n').map((item, key) => {
return <span key={key}><Col smOffset={2} mdOffset={1} sm={6}>{item}</Col><br/></span>
})}
</div>在handleOnClick上，我正在尝试这样做
var text = this.divRef.current.innerText;回答 2
Stack Overflow用户
回答已采纳
发布于 2018-08-04 07:48:05
在遇到refs和内容可编辑div的麻烦之后，我用draftJS而不是文本区域或div来做这件事
感谢Chayim的耐心和回答
以防有人用同样的问题检查这个问题，这是我用来用draftJS显示可编辑文本的代码。
class RuleDescriptionViewAdmin extends Component {
constructor(props,context){
super(props,context);
this.handleOnClick = this.handleOnClick.bind(this);
const processedHTML = DraftPasteProcessor.processHTML(this.props.rule.description.replace(/\n/g, "<br />"));
const contentState = ContentState.createFromBlockArray(processedHTML);
var editorState = EditorState.createWithContent(contentState);
var editorState = EditorState.moveFocusToEnd(editorState);
this.state = {editorState: editorState};
this.onChange = (editorState) => this.setState({editorState});
}
handleOnClick(event) {
var url = 'http://localhost:8080/rules/' + this.props.rule.id;
const blocks = convertToRaw(this.state.editorState.getCurrentContent()).blocks;
const value = blocks.map(block => (!block.text.trim() && '\n') || block.text).join('\n');
//do something with value
}
render(){
return(
<div>
<Col smOffset={2} mdOffset={1}>
<PageHeader>
{this.props.rule.title}
</PageHeader>
<Editor
editorState={this.state.editorState}
onChange={this.onChange}
/>
</Col>
<Col smOffset={2} mdOffset={1}>
<Button onClick = {this.handleOnClick}>Update rule</Button>
</Col>
</div>
);
}
}Stack Overflow用户
发布于 2018-07-16 13:54:41
尝试使用<div contenteditable="true">而不是<textarea>。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51355269
复制相关文章
相似问题