übergeben Daten von Kind-Komponente zu einer anderen Kind-Komponente über Eltern-Komponente in reagieren

Question

Ich lerne reagieren und bin fest auf ein Problem. Ich habe 3 Komponenten, TransactionsDetails, TransactionForm und TransactionsTable.

Die Datensätze werden in den status.records von TransactionsDetails gespeichert und in TransactionsTable angezeigt. Ich versuche Datensätze hinzuzufügen, zu bearbeiten, zu aktualisieren oder zu löschen. Ich habe die Funktion zum Hinzufügen und Löschen erfolgreich hinzugefügt, bleibe aber beim Bearbeiten und Aktualisieren hängen. In den Tabellenzeilen habe ich also für jede Zeile die Schaltfläche Bearbeiten und Löschen. Wenn Sie auf Bearbeiten klicken, sollte es die Datensatzdaten in das Formular laden und wenn Sie auf Speichern/Senden klicken, sollte es den Datensatz aktualisieren.

var TransactionForm = React.createClass({ 
    getInitialState: function(){ 
     return { date: '', amount: '' }; 
    }, 

    handleChange: function(e){ 
     switch(e.target.name){ 
     case 'date': 
      this.setState({date: e.target.value}); 
      break; 
     case 'amount': 
      this.setState({amount: e.target.value}); 
      break; 
     } 
    }, 

    handleSubmit: function(e){ 
     e.preventDefault(); 
     this.props.handleNewRecord(this.state); 
     this.setState(this.getInitialState()); 
    }, 

    render: function(){ 
     return (
     <form onSubmit={this.handleSubmit} className="form-horizontal"> 
      <div className="form-group"> 
      <label for="date" className="col-sm-2 control-label">Date: </label> 
      <div className="col-sm-10"> 
       <input type='text' name='date' className="form-control" value={this.state.date} onChange={this.handleChange}/> 
      </div> 
      </div> 
      <div className="form-group"> 
      <label for="amount" className="col-sm-2 control-label">Amount: </label> 
      <div className="col-sm-10"> 
       <input type='integer' name='amount' className="form-control" value={this.state.amount} onChange={this.handleChange}/> 
      </div> 
      </div> 
      <div className="form-group"> 
      <div className="col-sm-offset-2 col-sm-10"> 
       <button className="btn btn-primary" type='submit'>Submit</button> 
      </div> 
      </div> 
     </form> 
    ); 
    } 
    }); 

    var TransactionRow = React.createClass({ 
    handleDelete: function(e){ 
     e.preventDefault(); 
     this.props.handleDeleteRecord(this.props.record); 
    }, 

    handleEdit: function(e){ 
     e.preventDefault(); 
     this.props.handleEditRecord(this.props.record); 
    }, 

    render: function(){ 
     return (
     <tr> 
      <td>{this.props.record.date}</td> 
      <td>{this.props.record.amount}</td> 
      <td> 
      <button className="btn btn-primary" onClick={this.handleEdit}>Edit</button> 
      <button className="btn btn-danger" onClick={this.handleDelete}>Delete</button> 
      </td> 
     </tr> 
    ); 
    } 
    }); 

    var TransactionsTable = React.createClass({ 
    render: function(){ 
     var rows = []; 
     this.props.records.map(function(record, index){ 
     rows.push(<TransactionRow key={index} record={record} handleDeleteRecord={this.props.handleDeleteRecord} 
     handleEditRecord={this.props.handleEditRecord}/>); 
     }.bind(this)); 
     return (
     <table className="table table-striped table-hover table-bordered"> 
      <thead> 
      <tr> 
       <th> Date </th> 
       <th> Amount </th> 
       <th> Actions </th> 
      </tr> 
      </thead> 
      <tbody> 
      { rows } 
      </tbody> 
     </table> 
    ); 
    } 
    }); 

    var TransactionsDetails = React.createClass({ 
    getInitialState: function(){ 
     return { records: [ 
     { date: '1-6-2016', amount: 1000}, 
     { date: '2-6-2015', amount: -400} 
     ] }; 
    }, 

    addRecord: function(record){ 
     var records = this.state.records; 
     records.push(record); 
     this.setState({ records: records }); 
    }, 

    deleteRecord: function(record){ 
     var records = this.state.records; 
     var index = records.indexOf(record); 
     records.splice(index, 1); 
     this.setState({ records: records }); 
    }, 

    editRecord: function(record){ 
     if(record){ 
      return record; 
     } else { 
      return {}; 
     } 
    }, 

    render: function(){ 
     return (
     <div className="container"> 
      <div className='row'> 
      <div className="col-md-4"> 
       <div className="well"> 
       <TransactionForm handleNewRecord={this.addRecord} record={this.editRecord()} /> 
       </div> 
      </div> 
      </div> 
      <div className='row'> 
      <div className="col-md-offset-2 col-md-8"> 
       <div className="well"> 
       <TransactionsTable records={this.state.records} handleDeleteRecord={this.deleteRecord} 
       handleEditRecord={this.editRecord}/> 
       </div> 
      </div> 
      </div> 
     </div> 
    ); 
    } 
    }); 

Answer 1

ich die Profil bearbeiten, löschen und hinzufügen Datensatz arbeiten nach Ihren Code mit weniger Änderung, um Ihren Code Stil zu respektieren und original

capture

var TransactionForm = React.createClass({ 
    getInitialState: function(){ 
    return { date: '', amount: '' }; 
    }, 

    handleChange: function(e){ 
    switch(e.target.name){ 
     case 'date': 
     this.setState({date: e.target.value}); 
     break; 
     case 'amount': 
     this.setState({amount: e.target.value}); 
     break; 
    } 
    }, 

    componentWillReceiveProps: function(nextProps) { 
    if(nextProps.recordToEdit.index != this.props.recordToEdit.index) { 
     this.setState(nextProps.recordToEdit.record) 
    } 
    }, 

    handleSubmit: function(e){ 
    e.preventDefault(); 
    if(this.props.recordToEdit.index > -1) { 
     this.props.handleUpdateRecord(this.props.recordToEdit.index, this.state); 
    } else { 
     this.props.handleNewRecord(this.state); 
    } 
    this.setState(this.getInitialState()); 
    }, 

    render: function(){ 
    return (
     <form onSubmit={this.handleSubmit} className="form-horizontal"> 
     <div>{this.props.recordToEdit.index > -1 ? 'Edit mode' : 'Create mode'}</div> 
     <div className="form-group"> 
      <label for="date" className="col-sm-2 control-label">Date: </label> 
      <div className="col-sm-10"> 
      <input type='text' name='date' className="form-control" value={this.state.date} onChange={this.handleChange}/> 
      </div> 
     </div> 
     <div className="form-group"> 
      <label for="amount" className="col-sm-2 control-label">Amount: </label> 
      <div className="col-sm-10"> 
      <input type='integer' name='amount' className="form-control" value={this.state.amount} onChange={this.handleChange}/> 
      </div> 
     </div> 
     <div className="form-group"> 
      <div className="col-sm-offset-2 col-sm-10"> 
      <button className="btn btn-primary" type='submit'>Submit</button> 
      </div> 
     </div> 
     </form> 
    ); 
    } 
}); 

TransactionForm.defaultProps = { 
    recordToEdit: { index: -1, record: {}} 
}; 

var TransactionRow = React.createClass({ 
    render: function(){ 
    return (
     <tr> 
     <td>{this.props.record.date}</td> 
     <td>{this.props.record.amount}</td> 
     <td> 
      <button className="btn btn-primary" onClick={this.props.handleEditRecord}>Edit</button> 
      <button className="btn btn-danger" onClick={this.props.handleDeleteRecord}>Delete</button> 
     </td> 
     </tr> 
    ); 
    } 
}); 

var TransactionsTable = React.createClass({ 
    render: function(){ 
    var rows = this.props.records.map(function(record, index){ 
     return <TransactionRow key={index} record={record} handleDeleteRecord={() => this.props.handleDeleteRecord(index)} 
           handleEditRecord={() => this.props.handleEditRecord(index, record)}/>; 
    }.bind(this)); 
    return (
     <table className="table table-striped table-hover table-bordered"> 
     <thead> 
     <tr> 
      <th> Date </th> 
      <th> Amount </th> 
      <th> Actions </th> 
     </tr> 
     </thead> 
     <tbody> 
     { rows } 
     </tbody> 
     </table> 
    ); 
    } 
}); 

var TransactionsDetails = React.createClass({ 
    getInitialState: function(){ 
    return { 
     records: [ 
     { date: '1-6-2016', amount: 1000}, 
     { date: '2-6-2015', amount: -400} 
     ], 
     recordToEdit: { 
     index: -1, 
     record: {} 
     } 
    }; 
    }, 

    addRecord: function(record){ 
    var records = this.state.records; 
    records.push(record); 
    this.setState({ records: records }); 
    }, 

    deleteRecord: function(index){ 
    console.log(index) 
    var records = [].concat(this.state.records); 
    records.splice(index, 1); 
    this.setState({ records: records }); 
    }, 

    updateRecord: function(index, record){ 
    var records = [].concat(this.state.records) 
    records[index] = record; 
    this.setState({ records: records }); 
    }, 

    editRecord: function (index, record) { 
    this.setState({ 
     recordToEdit: { 
     index: index, 
     record: record 
     } 
    }) 
    }, 

    render: function(){ 
    return (
     <div className="container"> 
     <div className='row'> 
      <div className="col-md-4"> 
      <div className="well"> 
       <TransactionForm handleNewRecord={this.addRecord} handleUpdateRecord={this.updateRecord} recordToEdit={this.state.recordToEdit} /> 
      </div> 
      </div> 
     </div> 
     <div className='row'> 
      <div className="col-md-offset-2 col-md-8"> 
      <div className="well"> 
       <TransactionsTable records={this.state.records} handleDeleteRecord={this.deleteRecord} 
           handleEditRecord={this.editRecord}/> 
      </div> 
      </div> 
     </div> 
     </div> 
    ); 
    } 
}); 

Um diese Arbeit ich zu machen Führen Sie "index" ein, um den zu löschenden oder zu aktualisierenden Datensatz identifizieren zu können, und auch ein recordToEdit für den Komponentestatus