onClick không hiển thị thành phần phản hồi mới.

Question

Tôi mới để phản ứng trên thế giới và tôi có dòng như sau:

<Button onClick={() => console.log("hello")}>Button</Button> 

và nhấp chuột, bạn sẽ nhận được hello in trên console. Bây giờ có sự thay đổi để:

<Button onClick={() => <NewComponent />}>Button</Button> 

bây giờ nhấp chuột vào nút, tôi hy vọng các NewComponent để được trả lại. Nhưng nó không.

Tôi không chắc chắn, tại sao lại như vậy. Lưu ý rằng tôi có mã ở trên trong phương thức render.

Answer 1

Bạn có thể muốn có thành phần trạng thái hiển thị thành phần khác bên cạnh nút sau khi được nhấp. Tất cả những gì bạn cần làm là theo dõi xem nút có được nhấp hay không:

class MyComponent extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     showComponent: false, 
    }; 
    this._onButtonClick = this._onButtonClick.bind(this); 
    } 

    _onButtonClick() { 
    this.setState({ 
     showComponent: true, 
    }); 
    } 

    render() { 
    return (
     <div> 
     <Button onClick={this._onButtonClick}>Button</Button> 
     {this.state.showComponent ? 
      <NewComponent /> : 
      null 
     } 
     </div> 
    ); 
    } 
} 

Answer 2

Đây là một số CodePen để hiển thị hoạt động.

HTML

<div id="root">loading...</div> 

JSX

class NewComponent extends React.Component { 
    render() { 
    return (
     <div {...this.props}> 
     new component 
     </div> 
    ); 
    } 
} 

class Button extends React.Component { 
    render() { 
    return (
     <button {...this.props}> 
     click 
     </button> 
    ); 
    } 
} 

class App extends React.Component { 
    constructor() { 
    super(); 

    this.state = { 
     clicked: false 
    }; 

    this.handleClick = this.handleClick.bind(this); 
    } 

    handleClick() { 
    this.setState({ 
     clicked: true 
    }); 
    } 

    render() { 
    return (
     <div> 
     <Button onClick={this.handleClick} /> 
     {this.state.clicked ? <NewComponent /> : null} 
     </div> 
    ); 
    } 
}; 

React.render(
    <App />, 
    document.getElementById("root") 
);