单击按钮时如何渲染元素:ReactJS [英] How to render element on click of button: ReactJS
问题描述
我试图在您单击按钮后立即呈现一个段落。
I am trying to render a paragraph as soon as the you click the button.
这是我的代码。
import React, { Component } from 'react';
class App extends Component {
constructor() {
super();
this.createText = this.createText.bind(this);
}
createText() {
return(
<p>hello friend</p>
)
}
render() {
return (
<div className="App">
<button onClick={this.createText}>Click</button>
</div>
);
}
}
export default App;
这里我试图在点击按钮时呈现你好朋友。但是没有用。
Here I am trying to render "hello friend" when the button is clicked. But is not working.
推荐答案
这不是正确的方法,因为 createText
是一个事件处理程序,它不会呈现元素,你需要的是条件呈现元素。
This is not the correct way because createText
is a event handler it will not render the element, what you need is "Conditional rendering of elements".
检查文档以获取更多详细信息 有条件渲染 。
Check Docs for more details Conditional Rendering.
步骤:
1-使用状态变量,初始值 false
。
1- Use a state variable with initial value false
.
2-点击按钮将值更新为 true
。
2- Onclick of button update the value to true
.
3-使用状态值进行条件渲染。
3- Use that state value for conditional rendering.
工作代码:
class App extends React.Component {
constructor() {
super();
this.state = {
isShow: false
}
this.createText = this.createText.bind(this);
}
createText() {
this.setState({ isShow: true })
}
render() {
return (
<div className="App">
<button onClick={this.createText}>Click</button>
{this.state.isShow && <p>Hello World!!!</p>}
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('app'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='app' />
这篇关于单击按钮时如何渲染元素:ReactJS的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!