反應 - 如何獲取更新的數據以顯示在我的表格中？

Question

我需要能夠更新我的表格行中的值，然後讓這些新值顯示在單元格中。我會如何去做這件事？

這裏是我目前正與代碼：

主要表組件

import React from 'react'; 
import TableWithDataHeader from './TableWithDataHeader.jsx'; 
import TableWithDataBody from './TableWithDataBody.jsx'; 
import TableWithDataRowForm from './TableWithDataRowForm.jsx'; 
import {updateRowHistory} from '../../actions/DALIActions'; 
import AppStore from '../../stores/AppStore'; 

export default class TableWithData extends React.Component { 
    state = {rows: [], isEditing: false, input: null}; 
    updateState =() => { 
     let rows = this.state.rows; 
     rows.shift(); 
     rows.push({id: AppStore.getRowId(), cells: AppStore.getUpdatedCells()}); 
     this.setState({rows}); 
     console.log(rows); 
    }; 

    componentDidMount() { 
     let rows = this.state.rows; 
     rows.push({id: AppStore.getRowId(), cells: AppStore.getCells().historycells}); 
     this.setState({rows}); 
     console.log(rows); 
     AppStore.addChangeListener(this.updateState); 
    } 

    handleEdit = (row) => { 
     this.setState({isEditing: true}); 
    }; 

    handleInputChange = (newCellValuesArray) => { 
     let input = this.state.input; 
     input = newCellValuesArray; 
     this.setState({input}); 
    }; 

    editStop = (row) => { 
     this.setState({isEditing: false}); 
    }; 

    handleSubmit = (access_token, row_id) => { 
     let newCellValuesArray = this.state.input; 
     updateRowHistory(access_token, row_id, newCellValuesArray); 
     this.setState({isEditing: false}); 
    }; 

    componentWillUnmount() { 
     AppStore.removeChangeListener(this.updateState); 
    } 

    render() { 

     let {rows, isEditing, input} = this.state; 

     console.log(rows); 
     console.log(rows.map(row => { 
      return row.cells; 
     })); 

     return (
      <div> 
       <div className="row"> 
        <table className="table table-striped"> 
         <thead> 
          <TableWithDataHeader /> 
         </thead> 
         <tbody> 
          {rows.map(row => this.state.isEditing ? 
           <TableWithDataRowForm key={row.id} cells={row.cells} editStop={this.editStop.bind(null, row)} handleSubmit={this.handleSubmit.bind(this)} handleInputChange={this.handleInputChange.bind(this)} /> : 
           <TableWithDataBody key={row.id} cells={row.cells} handleEdit={this.handleEdit.bind(null, row)} /> 
          )} 
         </tbody> 
        </table> 
       </div> 
      </div> 
     ); 
    } 
} 

編輯行組件

import React from 'react'; 
import AppStore from '../../stores/AppStore'; 

export default class TableWithDataRowForm extends React.Component { 
    state = {cells: this.props.cells, newCellValues: []}; 

    onChange(e) { 
     let newCellValues = this.state.newCellValues; 
     newCellValues[e.target.id] = e.target.value; 
     this.setState({newCellValues}); 
     console.log(newCellValues); 
     let newCellValuesArray = []; 
     for (let key in newCellValues) { 
      if (newCellValues.hasOwnProperty(key)) { 
       newCellValuesArray.push({contents: newCellValues[key]}); 
      } 
     } 
     console.log(newCellValuesArray); 
     this.props.handleInputChange(newCellValuesArray); 
    } 

    editStop() { 
     this.props.editStop(); 
    } 

    handleSubmit(e) { 
     e.preventDefault(); 

     let access_token = AppStore.getToken(); 
     let row_id = AppStore.getRowId(); 

     this.props.handleSubmit(access_token, row_id); 
    } 

    render() { 

     let {cells, newCellValues} = this.state; 

     return (
      <tr> 
       {cells.map(cell => { 
        return <td key={cell.id} className="text-center"><input type="text" className="form-control" id={cell.id} defaultValue={cell.contents} onChange={this.onChange.bind(this)} /></td> 
       })} 
       <td> 
        <button className="btn btn-default"><i className="fa fa-ban" onClick={this.editStop.bind(this)}></i>Cancel</button> 
        <button className="btn btn-success"><i className="fa fa-cloud" onClick={this.handleSubmit.bind(this)}></i>Save</button> 
       </td> 
      </tr> 
     ); 
    } 
} 

這是它的那一刻位錯位，但我認爲，你可以得到我正在嘗試的一般想法！所以，我可以讓表格初步呈現來自商店的數據值，並且我可以將它們成功編輯爲不同的值。但是，我希望它能夠在我點擊保存按鈕時顯示新值。我正在使用React和flux來構建它。

答案與實例始終非常感激

感謝您的時間

Answer 1

你的問題是，你有我們的細胞狀態的兩倍。 一次在你的行中，一次在你的表中。 你永遠不應該這樣做，但只有在表中的狀態，並將它們作爲道具傳遞並作爲道具訪問它們。只有臨時編輯的vakue應該保存爲額外的狀態。 您可以通過componentWillReceiveProps獲取道具更改。

這裏的精簡例子：

var Row = React.createClass({ 

    getInitialState: function() { 
     return { 
      tempValue: this.props.value 
     } 
    }, 

    componentWillReceiveProps: function(nextProps) { 
     //here u might want to check if u are currently editing but u get the idea -- maybe u want to reset it to the current prop on some cancelEdit method instead 
     this.setState({ 
      tempValue: nextProps.value 
     }); 
    }, 

    render: function() { 
     return <div><input type="text" value={this.state.tempValue} onChange={this.onChange} /></div>; 
    }, 

    onChange: function(e) { 
     this.setState({ 
      tempValue: e.target.value 
     }); 
    } 
}); 


var Hello = React.createClass({ 

    getInitialState: function() { 
     return { 
      value: 'someServerState' 
     } 
    }, 

    render: function() { 
     return (
     <div> 
      <Row value={this.state.value} /> 
      <button onClick={this.reloadFromServer} >reload from Server</button> 
     </div> 
     ); 
    }, 

    //this will be triggered by some of ur events - i added a button 
    reloadFromServer: function() { 
     this.setState({ 
      value: 'someServerState changed somehow' 
     }); 
    } 
}); 

見：https://jsfiddle.net/69z2wepo/34292/