Question

我想在表格中添加一个添加按钮。我在BootstrapTable中使用“ insertRow”，在otpions中我将“ insertBtn：createCustomInsertButton” 并且在createCustomInsertButton函数中，我自定义了我的按钮，希望当它单击时重定向到另一个页面。

    render() {
        {
            console.log(this.props.store.environnements.length)
        }
        return (
            <div>
                <BootstrapTable selectRow={selectRow} data={this.props.store.environnements} options={options} deleteRow insertRow
                                pagination striped hover condensed>
                    <TableHeaderColumn isKey={true} dataField="id" hidden={true}>ID</TableHeaderColumn>
                    <TableHeaderColumn dataField='nom' filter={{type: 'TextFilter'}}>Nom</TableHeaderColumn>
                    <TableHeaderColumn dataFormat={buttonFormatter}>Action</TableHeaderColumn>
                </BootstrapTable>
            </div>
        );
    }

const options = {
    deleteBtn: createCustomDeleteButton,
    insertBtn: createCustomInsertButton
};

function createCustomInsertButton() {
    return (
        <InsertButton
            btnText='Ajouter'
            btnContextual='btn-success'
            className='btn-list btn-success-maif'
            btnGlyphicon='glyphicon-edit'
            onClick={test()}
       />
    );
}

function test() {
    return (
        <Redirect to='/environnement/add'></Redirect>
    );
}

Answer 1

提供createCustomInsertButton定义之外的所有内容，都可以按您期望的方式工作，onClick期望功能。您的代码会调用一个函数，因此，每调用createCustomInsertButton时，test也是如此。

相反，将函数传递到onClick（不带括号）：

onClick={test}

从React文档中：

使用JSX，您可以传递一个函数作为事件处理程序，而不是字符串。

React Handling Events Docs

Answer 2

使用

 onClick = { () => test() }

或

onClick = { test }

如果您有SPA，则应使用react-router的链接

import { Link } from 'react-router-dom'

<Link to="/page"> Page </Link>

InsertButton问题重定向到其他页面

2 个答案: