버튼 클릭시 요소를 렌더링하는 방법 : ReactJS

Question

버튼을 클릭하자마자 단락을 렌더링하려고합니다.

여기 내 코드입니다.

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; 

는 여기가 버튼을 클릭했을 때 "안녕하세요 친구"를 렌더링하는 것을 시도하고있다. 그러나 작동하지 않습니다.

Answer 1

createText은 요소를 렌더링하지 않는 이벤트 처리기이므로 올바른 방법은 아닙니다. 필요한 요소는 "조건부 렌더링"입니다.

자세한 내용은 Conditional Rendering 문서를 확인하십시오.

단계 :

1을 사용하여 초기 값 false와 상태 변수입니다.

2 버튼 Onclick은 true으로 값을 업데이트합니다.

3- 조건부 렌더링에 해당 상태 값을 사용합니다.

작업 코드 : 당신은 당신이 DOM 반응에`

안녕하세요 친구

을`렌더링되지 않기 때문에

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' />