Raised Button onClick löst verschiedene Funktionen aus

Question

Ich habe zwei Komponenten, RaisedButton und TableList. Die Tabellenliste gibt die Zeilen zurück und das gleiche wird im Status aktualisiert (currentSelectedRows). RaisedButton tröstet einfach die currentSelectedRows. Jetzt die Problemaussage:

onClick von RaisedButton tröstet es den Zustand richtig (mit approveSelected) bis die Zeit updateSelectedRows den Zustand nicht aktualisiert. Sobald der Status innerhalb der updateSelectedRows-Methode aktualisiert wurde, ruft onClick der RaisedButton-Komponente zuerst updateSelectedRows und dann approveSelected auf. Unten ist der Code.

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> 
    ) 
} 

}

Jede Beratung wäre eine große Hilfe sein.

Dank

Answer 1

Sie nicht den Code für TableList vorsah, so ist es schwer zu wissen, was das Problem sein könnte, aber es scheint zu funktionieren, wenn Sie die Eltern gerade nach oben eine Reihe ID passieren:

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>