Question

我在react项目中有一个素材UI表，我希望用户点击铅笔/编辑图标来编辑表格行。

这是一个加载的问题，但是这需要额外的Material UI吗？什么逻辑看起来会发生这种情况？我在后端设置了大部分代码，但不知道如何在组件中编写代码???

感谢您的期待！

//STYLE VARIABLE BOR MATERIAL BUTTON
const style = {
    margin: 12
    //
};




const mapStateToProps = (state) => ({
    user: state.user,
    reduxState: state.getExpense
});

class ExpenseTable extends Component {
    constructor(props) {
        super(props);

        this.state = {
            getExpense: []
        };
    }

      isSelected = (index) => {
        return this.state.selected.indexOf(index) !== -1;
      };

      handleRowSelection = (selectedRows) => {
        this.setState({
          selected: selectedRows,
        });
      };

    //on page load, DISPATCH GET_EXPENSE is
    //SENT TO expenseSaga which then
    //goes to getExpenseReducer and appends EXPENSE_DATA to the
    //DOM
    componentDidMount() {
        const { id } = this.props.match.params;
        this.props.dispatch({ type: USER_ACTIONS.FETCH_USER });
        this.props.dispatch({ type: 'GET_EXPENSE' });
    }

    componentDidUpdate() {
        if (!this.props.user.isLoading && this.props.user.userName === 
       null) {
            this.props.history.push('home');
        }
    }

    logout = () => {
        this.props.dispatch(triggerLogout());
        // this.props.history.push('home');
    };

    //SETS STATE FOR ALL INPUTS
    handleChange = (name) => {
        return (event) => {
            this.setState({
                [name]: event.target.value
            });
        };
    };

    //SUBMIT BUTTON- TRIGGERS DISPATCH TO EXPENSE SAGA TO ADD DATA
    handleClick = () => {
        console.log('add expense', this.state);
        this.props.dispatch({
            type: 'ADD_EXPENSE',
            payload: this.state
        });
    };


    //TRASH ICON-TRIGGERS DISPATCH TO EXPENSE SAGA DELETE
    handleClickRemove = (id) => {
        console.log('delete expense', this.state);
        this.props.dispatch({
            type: 'DELETE_EXPENSE',
            payload: id
        });
    };

    handleClickEdit = (row) => {
        console.log('edit expense', this.state)
        this.props.dispatch({
            type: 'EDIT_EXPENSE',
            payload: row
        })
    }

    render() {
        console.log('HEY-oooo expense render', this.state);
        let content = null;
        if (this.props.user.userName) {

      //MAP OVER REDUX STATE.

const tableRows = this.props.reduxState.map((row) => {

        //.MAP SEPARATES DATA INTO INDIVIDUAL ITEMS.

                const { id, item_description, purchase_date, 
                item_price, item_link } = row;
                return (
                    <TableRow selectable={false}>
                        {/* TABLE ROWS */}

                        <TableRowColumn>{item_description} 
                        </TableRowColumn>
                        <TableRowColumn>{purchase_date} 
                        </TableRowColumn>
                        <TableRowColumn>${item_price}</TableRowColumn>
                        <TableRowColumn><a href={item_link}>{item_link} 
                        </a></TableRowColumn>
                        <TableRowColumn><EditIcon class="grow:hover" 
                        onClick={() => {this.handleClickEdit(row)}} /> 
                        </TableRowColumn>
                        <TableRowColumn><TrashIcon onClick={() => 
                         {this.handleClickRemove(id);
                        }}/>
                        </TableRowColumn>
                    </TableRow>

                    // END TABLE ROWS
                );
            });

                <div>
                    {/* FORM FOR ADDING EXPENSES(DATA) */}

                    <form id="expenseForm">
                        <h3>
                            Add a new <br />
                            expense
                        </h3>
                        <input
                            type="text"
                            id="fname"
                            name="fname"
                            placeholder="Item description"
                            onChange= 
                            {this.handleChange('item_description')}
                        />

                        <br />

                        <br />
                        <input
                            type="text"
                            id="lname"
                            name="lname"
                            placeholder="Item price"
                            onChange={this.handleChange('item_price')}
                        />
                        <br />
                        <input
                            type="text"
                            id="lname"
                            name="lname"
                            placeholder="Item link"
                            onChange={this.handleChange('item_link')}
                        />
                        <br />

                        {/* END FORM */}

                        <RaisedButton
                            id="expSubmit"
                            label="Submit Expense"
                            primary={true}
                            style={style}
                            onClick={this.handleClick}
                        />
            {/* TABLE TOTAL KEEPS CURRENT TOTAL OF PRICE COLOUMN */}

                        <h1>Total:</h1>
                        <br />
                        <h3>$748.93</h3>
                    </form>


          {/* TABLE HEADERS */}
                    <Table>
                        <TableHeader>
                            <TableRow>
                                <TableHeaderColumn>Item 
                                 description</TableHeaderColumn>
                                <TableHeaderColumn>Purchase 
                                 Date</TableHeaderColumn>
                                <TableHeaderColumn>Item 
                                Price</TableHeaderColumn>
                                <TableHeaderColumn>Item 
                                Link</TableHeaderColumn>
                                <TableHeaderColumn>Edit 
                                entry</TableHeaderColumn>
                                <TableHeaderColumn>Delete 
                           entry</TableHeaderColumn>
                            </TableRow>
                        </TableHeader>

                        <TableBody>
                            {tableRows}
                        </TableBody>
                    </Table>
                </div>
            );
        }

        return (
            <div>
                <Nav />
                {content}
            </div>
        );
    }
}

// this allows us to use <App /> in index.js
export default connect(mapStateToProps)(ExpenseTable);

Answer 1

默认的Material-ui表不具有内联编辑功能。您必须编写自己的包装器才能实现此目标，这可能会很耗时。为了克服时间问题，我们可以使用一些好的现有库。这是DevExtreme的一个功能强大的库，与我使用的库相同，但是在您最终决定使用之前，请先仔细阅读它们的许可。

https://devexpress.github.io/devextreme-reactive/react/grid/demos/featured/controlled-mode/

在React + Redux中编辑材质UI行

1 个答案: