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

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

数据表以：

开头

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

对于示例的帮助将非常感激，对不起，如果代码现在有点混乱！

感谢您的时间

Answer 1

我可能会遗漏某些内容，但我看不到您在编辑rows州的位置？更改处理程序只更改input，而您不会将输入传递给数据表。

我看到rows被设置的唯一时间是componentDidMount，这解释了为什么它被填充，但没有更改。

React - 如何在表格中重新渲染？

1 个答案: