將道具傳遞給 ReactJS 中的彈出窗口

Question

我是 ReactJS 的新手。 我正在構建一個 web 應用程序來顯示用戶列表和 onclick 每一行都會有一個彈出窗口來顯示更多信息。

代碼 -

表格組件

class Table extends Component
{

    constructor(props){
        super(props);
        this.state = { showPopup: false };
    }

 togglePopup(user) {
    console.log(user)
    axios.get(user.href).then( response =>{
                   .......
    }
    this.setState({
                showPopup: !this.state.showPopup
            });
}

----------------------------------
----------------------------------

{ (this.props.users.length > 0) ? this.props.users.map( (user, index) => {
        return (
             <tr key={ index }>
               <td>{ user.name }</td>
               <td>{ (user.age != null && user.age > 0) ? user.age : '--' }</td>
               <td>{ user.phone }</td>
               <td>{ (user.cmp != null && user.cmp > 0) ? user.temperature : '--' }</td>
               <td><button onClick={this.togglePopup.bind(this,user)}>View</button></td>
             </tr>
          )
       }) : <tr><td colSpan="5">Loading...</td></tr> }

{this.state.showPopup ?
                    <Popup banksDetail = { this.state.banksDetail }
                           user = { this.props.user }
                        text='Click "Close Button" to hide popup'
                        closePopup={this.togglePopup.bind(this)}
                    />
                    : null
                }

這里有幾個問題

1. 當我關閉彈出窗口 window 時，在 togglePopup function user.href上未定義。

2. 內部彈出組件聲明user = this.props.user未定義

非常感謝任何幫助。

Answer 1

您的togglePopup方法不知道您發送到彈出組件的用戶道具，因為它位於彈出組件之外。 如果您想將用戶傳遞給togglePopup ，您可以通過使用 es6 語法返回帶有 user 參數的togglePopup來實現：

closePopup={() => this.togglePopup(user)}

並在構造函數中綁定togglePopup：

constructor(props){
        super(props);
        this.state = { showPopup: false };
        this.togglePopup = this.togglePopup.bind(this);
    }

至於您的第二個問題，您將 this.props.user 發送到可能未定義的 Popup 組件。 假設用戶是 object，您需要給它這樣的用戶：

user = { user }

Answer 2

Popup用它想要的任何 arguments 調用它的closePopup屬性。 例如，如果它調用closePopup(someMouseEvent) ，那么在togglePopup中， user將被設置為someMouseEvent 。 onClose={togglePopup.bind(this, user)}會起作用，因為它確保user在任何 arguments Popup窗口傳遞之前作為第一個參數傳遞給綁定的 function，所以如果它調用closePopup(someMouseEvent) (user, someMouseEvent) togglePopup實際上會被調用(user, someMouseEvent) 。

我不知道star是什么或為什么你有onClick={this.togglePopup.bind(this,star)}但這似乎是一個錯誤。 我認為你想要user而不是那里的star 。

關於問題 2，您可能想要的似乎是將user放入this.state ； 在togglePopup中，調用this.setState({user, showPopup: .this.state.showPopup}) ，在render過程中調用<Popup user={this.state.user} /> 。

不確定您如何認為togglePopup(user)會影響this.props.user ，但這是一種誤解。 this.props.user獲得值的唯一方法是渲染<Table user={...} /> 。