React - 我怎樣才能在我的桌子上重新渲染？

Question

我有一個表格，從一個商店的數據開始，然後可以按行編輯。編輯完成後，單擊一個按鈕以保存新值並將其顯示在表格中。但是，這並不適合我。我一直堅持這一段時間，並嘗試了各種各樣的東西，但他們都沒有工作。我認爲這可能是一個國家的問題，但我不知道如何改變它，使其工作！

我目前的代碼是：

表：

import React from 'react'; 

export default class TableWithDataBody extends React.Component { 
    state = {cells: this.props.cells}; 

    handleEdit =() => { 
     this.props.handleEdit(); 
    }; 

    render() { 

     let {cells} = this.state; 

     return (
      <tr> 
       {cells.map(cell => { 
        return <td key={cell.id} className="text-center">{cell.contents}</td> 
       })} 
       <td> 
        <button className="btn btn-primary" onClick={this.handleEdit}><i className="fa fa-pencil"></i>Edit</button> 
       </td> 
      </tr> 
     ); 
    } 
} 

行內編輯表單：

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} /></td> 
       })} 
       <td> 
        <button className="btn btn-default"><i className="fa fa-ban" onClick={this.editStop}></i>Cancel</button> 
        <button className="btn btn-success"><i className="fa fa-cloud" onClick={this.handleSubmit}></i>Save</button> 
       </td> 
      </tr> 
     ); 
    } 
} 

幫助

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

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

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

    render() { 

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

     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.id)} 
            handleSubmit={this.handleSubmit} 
            handleInputChange={this.handleInputChange} 
           /> 
           : 
           <TableWithDataBody 
            key={row.id} 
            cells={row.cells} 
            handleEdit={this.handleEdit.bind(null, row.id)} 
           /> 
          )} 
         </tbody> 
        </table> 
       </div> 
      </div> 
     ); 
    } 
} 

數據表開始例子是m非常感謝，抱歉，如果代碼現在有點混亂！

感謝您的時間

Answer 1

我可能失去了一些東西，但我不明白，你正在編輯的rows狀態？更改處理程序只是更改了input，並且您沒有將輸入傳遞到數據表。

我看到rows被設置的唯一時間是componentDidMount，這解釋了爲什麼它被填充但沒有改變。