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，这解释了为什么它被填充但没有改变。