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

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

我可以简单地切换一个状态，在默认显示状态 (a <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>
    ));