Как сделать столбец кликабельным в реагирующей загрузочной таблице и не показывать его в виде текстового поля в «Добавить строку»?

Question

Я сослался на следующее, чтобы сделать столбец в моей таблице начальной загрузки реагирующим:

Как добавить кнопку внутри каждой строки под определенным столбцом в таблице реакций Bootstrap?

Но когда я использую кнопку «Добавить новую строку», столбец в моей таблице начальной реакции остается текстовым полем. Я хочу, чтобы этот столбец также был URL-адресом с кнопкой / кликабелем.

Пожалуйста, помогите мне с этим.

Часть моего кода:

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>

Спасибо

Answer 1

Вы не передаете реквизит onClick в ButtonFormatter. Вам нужен метод для обработки события onClick, а затем вам нужно передать этот метод в ButtonFormatter. Что-то вроде этого:

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

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