Question

我在我的反应应用程序中使用bootstrap表。我希望有这样的功能：在每一行我想要一个编辑图标，当我点击它时，它应该使所有行元素可编辑。目前我有这样的表

<Table className='flags-table' responsive hover>
                    <thead>
                    <tr>
                        <th></th>
                        <th> Time In</th>
                        <th> Time Out</th>
                        <th> Type</th>
                        <th> Category</th>
                    </tr>
                    </thead>
                    <tbody>
                    {
                        that.props.tag_fetch_reducer.tags.map((x, i) => (
                            <tr key={i} onClick={this.handleRowClick.bind(this, i)}>
                                <td>
                                    <div className='red-box'></div>
                                </td>
                                <td> {x.frame_in} </td>
                                <td> {x.frame_out} </td>
                                <td> {x.tagname} </td>
                                <td> {x.category}</td>
                            </tr>
                        ))
                    }
                    </tbody>
                </Table>

如何使其可编辑？

Answer 1

我无法为您的可编辑表提供完整的代码，但我当然可以向您展示实现此目的的方法。

如果需要，可以提供一个表格，其中所有列都将被禁用输入框。因此，当使用点击编辑图标时，所有这些已禁用的输入字段都将启用，然后您可以编辑这些字段。您可以在react或redux状态下存储已禁用和已启用的状态。

that.props.tag_fetch_reducer.tags.map((item, index) => (
    <tr key={index}>
      <td>
        <input type="text" value={item.frame_in} disabled={this.isDisabled(index)}/>
      </td>
      <td>
        <input type="text" value={item.frame_out} disabled={this.isDisabled(index)} />
      </td>
      <td>
        <input type="text" value={item.tagName} disabled={this.isDisabled(index)} />
      </td>
      <td>
        <input type="text" value={item.category} disabled={this.isDisabled(index)} />
      </td>
      <td>
        <button onClick={this.handleRowClick.bind(this, index)}>
            Edit
        </button>
    </td>
 </tr>
);

其中isDisabled是一个函数，它将查看当前状态以检查特定索引处的字段是否被禁用。

或者，如果您不喜欢上述方法。您可以创建如下表格。

that.props.tag_fetch_reducer.tags.map((item, index) => (
  <tr key={index}>
    <td>
      {item.id}
      <input type="text" value={item.frame_in} style={this.showStyle(index)}/>
    </td>
    <td>
      {item.name}
      <input type="text" value={item.frame_out} style={this.showStyle(index)} />
    </td>
    <td>
      {item.name}
      <input type="text" value={item.tagName} style={this.showStyle(index)} />
    </td>
    <td>
      {item.name}
      <input type="text" value={item.category} style={this.showStyle(index)} />
    </td>
    <td>
      <button onClick={this.handleRowClick.bind(this, index)}>
        Edit
      </button>
    </td>
  </tr>
);

在这种方法中，您可以将显示部件和编辑部件彼此分开。这里，所有输入字段的开头样式为display: 'none'。现在，当用户点击编辑按钮时。您可以更改该特定行的样式，并使特定行的所有输入字段可见。

除此之外，如果您不想提供可编辑的表格，则可以创建单独的组件进行编辑。当用户点击编辑图标时，将显示新组件，用户可以在其中编辑所有这些字段并点击提交以保留所有这些更新的字段。

我能说的全部。

通过快速谷歌搜索，我发现了一些可以帮助您的资源。

React Data Grid Examples

Editable react table example on JSFiddle和explanation

希望这有帮助:)

Bootstrap表可在图标点击上编辑

1 个答案: