[英]react JS render a component after a click
我正在使用React,並且當用戶單擊<li>
標記時,將觸發popup方法,但是未顯示該方法內的組件,則不會觸發popup組件,這是為什么?
export default class Main extends React.Component {
constructor(props) {
super(props);
}
popup(value) {
console.log('fired ok');
//call popup component
<Popup value={value} />
}
render() {
return (
<ul>
<li key={0} onClick={() => this.popup(value)} />
</ul>
)
}
}
export default class Popup extends React.Component {
constructor(props) {
super(props);
}
render() {
console.log('this is not fired');
const { value } = this.props;
return (
<div class="popup">
<p>{value}</p>
</div>
)
}
}
您實際上需要渲染Popup
元素,類似於:
export default class Main extends React.Component {
constructor(props) {
super(props);
// save the popup state
this.state = {
visible: false, // initially set it to be hidden
value: '' // and its content to be empty
};
}
popup(value) {
console.log('fired ok');
this.setState({
visible: true, // set it to be visible
value: value // and its content to be the value
})
}
render() {
// conditionally render the popup element based on current state
const popup = (this.state.visible ? <Popup value={this.state.value} /> : null);
return (
<ul>
{popup}
<li key={0} onClick={() => this.popup('Hello World')}>Click Me!</li>
</ul>
)
}
}
這是行動中的一個小玩意兒 。 點擊黑色的“點擊我!” 文本。
希望對您有所幫助!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.