在react-bootstrap-table中添加Edit Button

Question

我正在使用react-bootstrap-table在React中實現表結構，我試圖添加編輯按鈕和onClick函數，但它不起作用。

我的代碼：

render(){
    function test(){
        alert("asd");
    }

    function imgFormatter(cell,row) {
        return '<a href="#" onClick="test();"><i class="fa fa-pencil" aria-
                  hidden="true"></i></a>';
    }

    return(
        <BootstrapTable data={this.state.members} bordered={ false } pagination={ true }>
            <TableHeaderColumn isKey dataField='memberid' dataSort>ID</TableHeaderColumn>
            <TableHeaderColumn dataField='name' dataSort>Name</TableHeaderColumn>
            <TableHeaderColumn dataField='username' dataSort>Username</TableHeaderColumn>
             <TableHeaderColumn dataField='email' dataSort>Email</TableHeaderColumn>
            <TableHeaderColumn dataField='mobile'>Mobile</TableHeaderColumn>
            <TableHeaderColumn dataField='edit' dataFormat={ imgFormatter }>Edit</TableHeaderColumn>
        </BootstrapTable>
    )
}

我正確實施了嗎？ 為什么編輯onclick無法正常工作？ 任何人都可以知道如何在react-bootstrap-table添加編輯按鈕。

Answer 1

我正確實施了嗎？

不，不是從函數返回字符串，而是返回JSX 。

像這樣寫格式化程序函數：

function imgFormatter(cell,row) {
    return  <a href="#" onClick={test}>
                <i class="fa fa-pencil" aria-hidden="true"></i>
            </a>;
}

為什么編輯onclick無法正常工作？

關於JSX中的事件，根據DOC ：

使用React元素處理事件與處理DOM元素上的事件非常相似。 有一些句法上的差異：

1. React事件使用camelCase而不是小寫命名。

2. 使用JSX，您可以將函數作為事件處理程序而不是字符串傳遞 。

建議：

我建議您在render方法之外定義並使用this關鍵字來訪問，而不是在render方法中定義這些函數。

像這樣：

imgFormatter(cell,row) {
    return  <a href="#" onClick={this.test}>
                <i class="fa fa-pencil" aria-hidden="true"></i>
            </a>;
}

test(){
    console.log('clicked');
}

render(){
    return(
        <BootstrapTable data={this.state.members} bordered={ false } pagination={ true }>
            .....
            <TableHeaderColumn dataField='edit' dataFormat={ this.imgFormatter.bind(this) }>Edit</TableHeaderColumn>
        </BootstrapTable>
    )
}

Answer 2

您以錯誤的方式實施了幾個錯誤：

1. 為了最佳實踐，所有函數都應該移出render（）
2. 您需要在render（）中添加return（）表模板，以便在組件中呈現它

3. 虛擬DOM語法中的所有類都應更改為className，因此應將其寫為：

    function imgFormatter(cell,row) { return '<a href="#" onClick={this.test}><i className="fa fa-pencil" aria- hidden="true"></i></a>'; } 

   使用組件的test（）引用。