Question

我有一个表格，我希望可以单击一个单元格，然后切换一个允许您更改该单元格中数据的输入。目前我只是直接输入输入，但理想情况下我不想要这个。我真正想要的是在单元格中显示当前数据，然后当您单击单元格时，它将成为输入并允许您编辑数据。

表组件：

import React from 'react';
import TableWithDataHeader from './TableWithDataHeader.jsx';
import Row from './Row.jsx';
import {createRowHistory} from '../../actions/DALIActions';
import TokenStore from '../../stores/TokenStore';
import TableDataStore from '../../stores/TableDataStore';

export default class Table extends React.Component {
    state = {data: TableDataStore.getCells().historycells};

    handleSubmitEvent = (e) => {
        e.preventDefault();
        console.log(this.state.data);
        let data = this.state.data;
        let dataEntriesArray = [];
        for (let key in data) {
            if (data.hasOwnProperty(key)) {
                dataEntriesArray.push({contents: data[key]});
            }
        }
        console.log(dataEntriesArray);

        let access_token = TokenStore.getToken();
        let row_id = TableDataStore.getRowId();

        createRowHistory(access_token, row_id, dataEntriesArray);

    };

    handleChangeEvent = (value, cell) => {
        let newState = this.state.data.slice(0);
        console.log(newState);
        newState[cell] = value;
        console.log(newState);
        this.setState({data: newState});
        console.log(this.state.data);
    };

    render() {

        let {data} = this.state;

        return (
            <div>
                <div className="row">
                    <table className="table table-striped table-bordered">
                        <thead>
                            <TableWithDataHeader />
                        </thead>
                        <tbody>
                            <Row data={this.state.data} handleSubmitEvent={this.handleSubmitEvent} handleChangeEvent={this.handleChangeEvent} />
                        </tbody>
                    </table>
                </div>
            </div>
        );
    }
}

行组件：

import React from 'react';
import TableDataStore from '../../stores/TableDataStore';

export default class Row extends React.Component {

    render() {

        let cells = this.props.data.map((el, i) => {
            return (
                <td key={i}>
                    <input type="text" className="form-control" id={el.id} defaultValue={el.contents} onChange={(e) => {
                        this.props.handleChangeEvent(e.target.value, i)
                    }} />
                </td>
            );
        });

        cells.push(
            <td className="dtable-button" key={this.props.data.length}>
                <button className="btn btn-primary" onClick={this.props.handleSubmitEvent}>Submit</button>
            </td>
        );

        return (
            <tr id={TableDataStore.getRowId()}>{cells}</tr>
        );
    }
}

我可以简单地切换一个状态，该状态将在默认显示状态（<div>？）和我已有的输入之间切换？或者我是否需要做一些更多的事情？

非常感谢任何帮助！

感谢您的时间

Answer 1

一种方法是创建一个渲染div的Cell组件，但在单击时，会改为渲染输入。

import React from 'react';

class Cell extends React.Component {
    constructor(props) {
        super(props);
        this.state = { editing: false };
    }

    render() {
        const { value, onChange } = this.props; 

        return this.state.editing ?
            <input ref='input' value={value} onChange={e => onChange(e.target.value)} onBlur={() => this.onBlur()} /> : 
            <div onClick={() => this.onFocus()}>{value}</div>
    }

    onFocus() {
        this.setState({ editing: true }, () => {
            this.refs.input.focus();
        });
    }

    onBlur() {
        this.setState({ editing: false });
    }
}

然后您可以像这样创建表格行：

let cells = data.map((el, i) => (
        <td key={i}>
            <Cell 
                value={el.contents}
                onChange={v => { this.props.handleChangeEvent(v, i) }} 
            />
        </td>
    ));

Answer 2

你可以喜欢这些。

let cells = this.props.data.map((el, i) => {
            return (
                <td key={i}>
                   {
                   (el.editable)?
                    <input type="text" className="form-control" id={el.id} defaultValue={el.contents} onChange={(e) => {
                        this.props.handleChangeEvent(e.target.value, i)
                    }} />:
                     <div onClick={onCellClick(i){}}>{el.contents}</div>
                   }
                </td>
            );
        });

应该使用onCellClick（i）{}＆amp;切换

可编辑标志。 this.props.handleChangeEvent（e.target.value，i）函数。你应该根据你在这里的索引更新approprite状态

React - 在表格的单元格中切换输入

2 个答案: