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

Posted 2023-02-22

【中文标题】React - 在表格的单元格中切换输入

【英文标题】：React - toggling input in a cell of a table

【发布时间】：2016-07-10 15:39:40

【问题描述】：

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

表格组件：

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>?）和我已有的输入之间切换的状态吗？还是我需要做一些更复杂的事情？

任何帮助将不胜感激！

感谢您的宝贵时间

【问题讨论】：

那是很多代码。您是否考虑过创建minimal reproducible example？

【参考方案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>
    ));

【讨论】：

当我尝试与此类似的操作时，我可以编辑单元格中的数据，但是一旦我单击它，单元格就会变为空白（即不显示编辑的数据）。我不知道是什么原因造成的，有什么想法吗？

@BeeNag 如果不查看您的代码，这很难说。看看这个 Fiddle，你可以看到我的 Cell 组件在运行：https://jsfiddle.net/iaretiga/1hptox0m/2/ 你可以在编辑单元格时打开控制台查看组件状态更新。

谢谢您，无法确定是什么原因造成的，但可能是因为我需要添加一个更改侦听器，以便我从中获取数据的商店知道它已更新？ !

【参考方案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) 和 this.props.handleChangeEvent(e.target.value, i) 函数切换可编辑标志。你应该根据你在这里的索引更新适当的状态

【讨论】：

我可以，但我得到的数据没有可编辑的标志。我可以只创建一个我切换的吗？但如果我这样做，我如何区分细胞呢？