如何解决具有React的DraftJs,装饰器无法正常工作
我尝试创建自己的装饰器,但无法正常工作。 它对我在搜索字段中输入的单词做了一些样式设计输入字段
<Editor
editorState={this.props.editorState}
onChange={this.handleOnChange}
/>
<div>
<input
value={this.props.searchState}
onChange={this.props.onChangeSearch}
placeholder="Search..."
/>
我的装饰器
const generateDecorator = (highlightTerm) => {
const regex = new RegExp(highlightTerm,'g');
return new CompositeDecorator([{
strategy: (contentBlock,callback,contentState) => {
if (highlightTerm !== '') {
findWithRegex(regex,contentBlock,callback);
}
},component: SearchHighlight,}]);
};
我的“样式”组件
class SearchHighlight extends Component {
render() {
return (
<span style={{fontSize: '32',backgroundColor: 'green',width: 40,height: 40}}>
{this.props.children}
</span>
);
}
实现装饰器
onChangeSearch = (e) => {
const search = e.target.value;
this.setState({
search,editorState: EditorState.set(this.state.editorState,{decorator: generateDecorator(search)}),});
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。