React - 如何获取更新的数据以显示在我的 table 中？

Question

我需要能够更新 table 行中的值，然后将这些新值显示在单元格中。我该怎么做呢？

这是我目前正在使用的代码：

主要Table组件

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

目前有点乱，但我认为您可以大致了解我正在尝试的内容！因此，我可以让 table 最初使用我商店中的数据值进行渲染，并且我可以成功地将它们编辑为不同的值。但是，我希望这样当我单击保存按钮时会显示新值。我正在使用 React with flux 来构建它。

总是非常感谢带有示例的答案

感谢您的宝贵时间

Answer 1

你的问题是你有两次我们细胞的状态。一次在你的行，一次在你的 table。你永远不应该这样做，而是只在 table 中拥有状态，并将它们作为 prop 传递并作为 prop 访问它们。只有临时编辑的 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/

React - 如何获取更新的数据以显示在我的 table 中？

React - how can I get updated data to show in my table?

reactjs

reactjs-flux