使用传递给哑组件的方法设置状态
Setting state with methods passed into dumb components
在我的智能组件中,我想使用一些方法来设置智能组件的状态。当用户与哑组件交互时,将触发从智能组件传递下来的方法,从而更改智能组件的状态
在下面的代码中,我希望我的setHighlight
将我的state.highlight
更改为字符串onClick
。clearHighlight
具有相同的功能,只是设置了this.state.highlight = null
。一旦设置了这个状态,this.state.highlight
就被传递给我的PrettyPrintPageSource
,以便执行highlightTag
中的逻辑。
我的代码目前显示这些错误:
warning.js:44Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the HomePage component.warning @ warning.js:44
warning.js:44Warning: Failed prop type: Required prop `setHighlightTag` was not specified in `TagSummary`.
in TagSummary (created by HomePage)
in HomePage (created by Connect(HomePage))
in Connect(HomePage) (created by RouterContext)
in div (created by App)
in MuiThemeProvider (created by App)
in App (created by RouterContext)
in RouterContext (created by Router)
in Router
in Providerwarning @ warning.js:44
warning.js:44Warning: Failed prop type: Required prop `clearHighlight` was not specified in `TagSummary`.
in TagSummary (created by HomePage)
in HomePage (created by Connect(HomePage))
in Connect(HomePage) (created by RouterContext)
in div (created by App)
in MuiThemeProvider (created by App)
in App (created by RouterContext)
in RouterContext (created by Router)
in Router
in Provider
下面是我的代码:
class HomePage extends React.Component {
constructor(props) {
super(props);
this.state = {
highlight: null
};
this.getPageSource = this.getPageSource.bind(this);
this.updateURLstate = this.updateURLstate.bind(this);
this.highlightTag = this.highlightTag.bind(this);
this.clearHighlight = this.clearHighlight(this);
this.setHighlightTag = this.setHighlightTag(this);
}
getPageSource(event) {
event.preventDefault();
this.props.actions.getPageSource(this.state.url);
}
updateURLstate(event) {
const url = event.target.value;
this.setState({
url
});
}
setHighlightTag(tag) {
this.setState({
highlight: tag
});
}
highlightTag(pageSource, tag) {
if (tag) {
let re = new RegExp(tag, "g");
pageSource.replace(re, "<span class='red'>"+ tag +"</span>")
}
}
clearHighlight() {
this.setState({
highlight: null
});
}
render() {
return (
<div>
<UrlForm
onSearch={ this.getPageSource }
onChange={ this.updateURLstate }
/>
<PrettyPrintPageSource
badUrl={ this.props.payload.error }
prettyPrintPageSource={ this.props.payload.prettySource }
highlighter={ this.highlightTag }
tag={ this.state.highlight }
/>
<TagSummary
tags={ this.props.payload.tagData }
setHighlightTag={ this.setHighlightTag }
clearHighlight={ this.clearHighlight }
/>
</div>
);
}
}
组件:
const TagSummary = ({ tags, setHighlightTag, clearHighlight }) => {
if (!tags) {
return <div />;
}
return (
<div>
{Object.keys(tags).map((tag) => {
return (
<div key={ tag }>
<button type="button" onClick={ setHighlightTag.bind(this, tag) }>
<pre><{ tag }></pre>
</button>
<p>{ tags[tag] }</p>
</div>
);
})}
<button onClick={ clearHighlight }>Clear</button>
</div>
);
};
PrettyPrintPageSource哑组件:
const PrettyPrintPageSource = ({ prettyPrintPageSource, badUrl, highlighter, tag }) => {
if (badUrl) {
return (
<div>
Bad URL!
</div>
);
} else {
let processedPageSource = highlighter.bind(this, prettyPrintPageSource, tag);
return (
<pre>
{ processedPageSource }
</pre>
);
}
};
您忘记绑定clearHighlight
和setHighlightTag
方法了。修改这些行:
constructor(){
....
this.clearHighlight = this.clearHighlight.bind(this);
this.setHighlightTag = this.setHighlightTag.bind(this);
}
相关文章:
- 如何将类方法设置为等于多个函数?-Javascript
- 如何使用setVisible()方法设置json模型中元素的可见属性
- 为node.js中的方法设置before/after钩子
- Javascript继承:从超类的方法设置子类的属性
- 使用 jquery ajax 上传文件的数据方法设置
- JS使用不同的方法设置点击属性
- 为流星方法设置 cron 作业
- 在Internet Explorer中从javascript打印方法设置pdf的文件名不起作用
- 类型错误:对象 #<套接字> 没有方法“设置”
- 将 jquery remove 方法设置为动画完成时的回调不起作用
- 主干.js:未捕获类型错误:对象 [对象数组] 没有方法“设置”
- 有没有办法为之前卸载方法设置例外
- 为什么使用jQuery设置属性会得到与使用DOM方法设置不同的结果呢
- 使用.html()方法设置javascript
- 正确的方法设置cookie从jQuery和读取从php
- 不能使用jQuery和value方法设置文本区域中的文本
- 如何使用SELECT2输入框方法设置默认值
- 使用传递给哑组件的方法设置状态
- 更好的jQuery方法设置outerWidth(true) - width
- 在对象的方法中通过外部方法设置变量