onClick觸發不同的功能

Question

我有兩個組件，RaisedButton和TableList。 Tablelist返回select行，並且在狀態（currentSelectedRows）中更新相同的行。 RaisedButton只是簡單地調整currentSelectedRows。現在的問題陳述：

onClick RaisedButton它正確地調節狀態（使用approveSelected）直到updateSelectedRows不更新狀態。一旦狀態在updateSelectedRows方法內更新，onClick RaisedButton組件首先調用updateSelectedRows，然後批准已選中。以下是代碼。

export default class MyList extends React.Component { 
constructor(props) { 
    super(props); 
    this.state = { 
     pendingList:[], 
     currentSelectedRows:[] 
    } 
}updateSelectedRows(selectedRows){ 
    console.log("updateCalled"); 
    this.setState({ 
     currentSelectedRows:selectedRows 
    }); 
}; 

approveSelected() { 
    console.log("approve selected"); 
    console.log(this.state.currentSelectedRows); 
}; 
render() { 
    return (
     <div className="container"> 
      <div className="row_align_right"> 
       <RaisedButton label="APPROVE" backgroundColor={MUIColors.lightGreen500} labelColor={MUIColors.white} onClick={this.approveSelected.bind(this)} /> 
      </div> 
      <div className="content"> 
       <div className=""> 
        <TableList 
         selectedRows={this.state.currentSelectedRows} 
         updateSelectedRows={this.updateSelectedRows.bind(this)} 
        /> 
       </div> 
      </div> 
     </div> 
    ) 
} 

}

任何意見將是很大的幫助。

感謝

Answer 1

您沒有爲TableList提供的代碼，所以很難知道可能是什麼問題，但它似乎工作時，你只是傳遞一個行ID向上父：

const usersList = [ 
 
    { name: 'John', age: 33 }, 
 
    { name: 'Jane', age: 32 }, 
 
    { name: 'David', age: 28 }, 
 
    { name: 'Eve', age: 29 }, 
 
]; 
 

 

 
class Row extends React.Component { 
 
    onClick = e => { 
 
    const { onClick, rowId } = this.props; 
 
    onClick(rowId) 
 
    } 
 

 
    render() { 
 
    const { user } = this.props; 
 
    return (
 
     <tr onClick={this.onClick}> 
 
     <td>{user.name}</td> 
 
     <td>{user.age}</td> 
 
     </tr> 
 
    ); 
 
    } 
 
} 
 

 
class TableList extends React.Component { 
 
    onClick = rowId => { 
 
    this.props.updateSelectedRows(rowId); 
 
    } 
 

 
    render() { 
 
    return (
 
     <table> 
 
     <thead> 
 
      <tr> 
 
      <th>Name</th> 
 
      <th>Age</th> 
 
      </tr> 
 
     </thead> 
 
     <tbody> 
 
      { 
 
      usersList.map((user, i) => <Row key={i} rowId={i} user={user} onClick={this.onClick}/>) 
 
      } 
 
     </tbody> 
 
     </table> 
 
    ); 
 
    } 
 
} 
 

 
class MyList extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.state = { 
 
     pendingList: [], 
 
     currentSelectedRows: [] 
 
    } 
 
    } updateSelectedRows(selectedRows) { 
 
    console.log("updateCalled"); 
 
    this.setState({ 
 
     currentSelectedRows: selectedRows 
 
    }); 
 
    }; 
 

 
    approveSelected() { 
 
    console.log("approve selected"); 
 
    console.log(this.state.currentSelectedRows); 
 
    }; 
 
    render() { 
 
    return (
 
     <div className="container"> 
 
     <div className="row_align_right"> 
 
      <button onClick={this.approveSelected.bind(this)}>Click</button> 
 
     </div> 
 
     <div className="content"> 
 
      <div className=""> 
 
      <TableList 
 
       selectedRows={this.state.currentSelectedRows} 
 
       updateSelectedRows={this.updateSelectedRows.bind(this)} 
 
      /> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    ) 
 
    } 
 
} 
 

 
ReactDOM.render(<MyList />, document.getElementById('root'));

<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="root"></div>