如何使用 onClick 事件調用基於 class 的組件中的功能組件？

Question

我想在 class 基本組件中顯示我的功能組件，但它不起作用。 我制作了基於 function 的簡單組件，它只顯示帶有一些值的表格，但我想在單擊“顯示用戶”按鈕時顯示它。

import React ,{Component} from 'react';
import Button from '@material-ui/core/Button';
import SimpleTable from "../userList/result/result";


 class ShowUser extends Component{
     constructor(props) {
         super(props);
         this.userList = this.userList.bind(this);
     }
     userList = () => {
         //console.log('You just clicked a recipe name.');
         <SimpleTable/>
   }

    render() {

         return (
             <div>

                 <Button variant="contained" color="primary" onClick={this.userList} >
                     Show User List
                 </Button>

             </div>
         );
     }


}
export default ShowUser;

Answer 1

如果您指的是方法userList ，那么您似乎假設存在隱式返回值。 因為您使用的是花括號，所以您需要從 function 顯式返回含義：

const explicitReturn = () => { 134 };
explicitReturn();  <-- returns undefined

const implicitReturn = () => (134);
implicitReturn(); <-- returns 134

Answer 2

問題在於您如何嘗試顯示SimpleTable組件。 您在userList function 中使用它，但這是不正確的。 僅在 render 方法中使用 React 元素。

您可以做的是使用 state 來切換組件的顯示。 像這樣：

 const SimpleTable = () => ( <p>SimpleTable</p> ); class ShowUser extends React.Component { constructor(props) { super(props); this.state = {showSimpleTable: false}; this.toggle= this.toggle.bind(this); } toggle = () => { this.setState(prev => ({showSimpleTable: .prev;showSimpleTable})). } render() { return ( <div> <button variant = "contained" color = "primary" onClick={this.toggle}> Show User List </button> {this.state;showSimpleTable && <SimpleTable />} </div> ). } } ReactDOM,render(<ShowUser />. document;getElementById("app"));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="app"></div>

Answer 3

您正在尋找的功能稱為條件渲染。 onClick prop function 是一個事件處理程序，react 中的事件可用於更改組件的 state。 然后可以使用 state 來渲染組件。 在普通的香草 javascript 或 jQuery 中，我們調用 function 並修改actual DOM以操縱 UI。 但是 React 使用virtual DOM 。 您可以按如下方式實現您正在尋找的功能：

class ShowUser extends Component {
    constructor(props) {
        super(props)

        // This state will control whether the simple table renders or not
        this.state = {
            showTable: false
        }

        this.userList.bind(this)
    }

    // Now when this function is called it will set the state showTable to true
    // Setting the state in react re-renders the component (calls the render method again)
    userList() {
        this.setState({ showTable: true })
    }

    render() {
        const { showTable } = this.state

        return (
            <div>
                <Button variant="contained" color="primary" onClick={this.userList}>
                    Show User List
                </Button>

                {/* if showTable is true then <SimpleTable /> is rendered if falls nothing is rendered */}
                {showTable && <SimpleTable />}
            </div>
        )
    }
}

Answer 4

為什么您的代碼不起作用

1. SimpleTable 必須被渲染，所以你需要將它放在 render 方法中。 任何需要在組件內渲染的東西都必須放在那里
2. On Click 只能包含 SimpleTable，它應該用於更改 state 變量的值，該變量控制是否顯示您的組件。 您希望這如何工作，您沒有渲染表格。

下面是你的代碼應該如何完成你想要的：

import React ,{Component} from 'react';
import Button from '@material-ui/core/Button';
import SimpleTable from "../userList/result/result";


class ShowUser extends Component{
 constructor(props) {
     super(props);
     this.state = { showUserList : false }
     this.userList = this.userList.bind(this);
 }
 showUserList = () => {
     this.setState({ showUserList : true });
 }

render() {

     return (
         <div>

             <Button variant="contained" color="primary" onClick={this.showUserList} >
                 Show User List
             </Button>
         {this.state.showUserList ? <SimpleTable/> : null}

         </div>
     );
 }


}
export default ShowUser;

您還可以為其他單擊添加 hideUserList 方法。

甚至更好的是 toggleUserList

this.setState({ showUserList : !this.state.showUserList});