javascript - 如何在react bootstrap表中使列可单击，并避免在“添加行”中将其显示为文本字段？

我参考以下内容以使我的React Bootstrap表中的列可点击：

How to add a button inside every row under a particular column in Bootstrap React Table?

但是，当我使用“添加新行”按钮时，我的反应引导表中的列仍然是文本字段。我也希望该列也可以是按钮/可点击的网址。

请帮我。

我的代码的一部分是：

class ButtonFormatter extends Component {
    render(){
    return (
        <button onClick={this.props.onClick }> Additional Info </button>
    );
    }
}

function buttonFormatter(cell, row) {
    return (
        <ButtonFormatter />
    );
}

<BootstrapTable deleteRow={true} selectRow={selectRowProp} options={options}
   insertRow={ true } data={this.props.data} cellEdit={cellEditProp}>

<TableHeaderColumn width='175' dataField="additionalinformation" dataFormat={
   buttonFormatter }> Additional Info </TableHeaderColumn>

</BootstrapTable>

谢谢

最佳答案

您没有将onClick道具传递给ButtonFormatter。您需要一个方法来处理onClick事件，然后需要将该方法传递给ButtonFormatter。与此类似：

function handleClick() {
   // code to add row
}

function buttonFormatter(cell, row) {
    return (
        <ButtonFormatter onClick={() => handleClick()} />
    );
}