Question

我是React的新手。目前，我正在使用react bootstrap table填充我的应用程序中的数据。我的任务是当用户点击表格的行时，它应该采取行的参数并重定向到不同的路线。

   <BootstrapTable data={ this.state.userDetails } options={options}>
            <TableHeaderColumn dataField='email' isKey>Email</TableHeaderColumn>
            <TableHeaderColumn dataField='familyName'>Family Name</TableHeaderColumn>
            <TableHeaderColumn dataField='givenName'>Given Name</TableHeaderColumn>
   </BootstrapTable>

我传递给react bootstrap table的选项的代码如下

const options={
  onRowClick:function(row, rowIndex, columnIndex, event){
    console.log(row);
    console.log(event);
    <Redirect to="/users/1" />;
  }
}

有人能让我知道我做错了什么吗？

修改

我的完整代码如下

class ListView extends React.Component {

constructor(props) {
 super(props)
 this.state = {userDetails:[]}
}

onSubmit(values){


/*API Call done over here as the state needed to manipulated*/
const headers={
  "Content-Type":"application/json",
  "Authorization":cookies.get('idToken'),
  "Access-Control-Allow-Origin":"*"
}

fetch(`${awsConfig.adminDevUrl}/users?email=${values.email}`,
       {
       method:"GET",
       headers:headers
      })
     .then(response => response.json())
     .then(data => {
              if(data.length>0){
                 this.setState({userDetails:data});
              }else{
                 this.setState({userDetails:[]});
              }
               this.props.reset();// Reset the form
      })
     .catch((error) => {
            this.setState({userDetails:[]});
      })
   }

renderField(field){

const className=`form-group`;
const Field=`${field.label=='Password'? 'password':'text'}`

  return (
    <div className={className}>
        <div className="input-group">
          <span className="input-group-addon"><i className="fa fa-search" aria-hidden="true"></i></span>
           <input className="form-control" type={Field} {...field.input}/>
        </div>

    </div>);
  }

render() {
  const { handleSubmit,history }=this.props;

const options={
  onRowClick:function(row, rowIndex, columnIndex, event){
    console.log(row);
    console.log(event);
    <Redirect to="/users/1" />;
  }
}


return (

  <div>
      <div>
          <NavigationBar />

           <div className="col-md-8 col-md-offset-2 col-lg-8 col-lg-offset-2">
              <p><b> Search Users on the Platform </b></p>
              <form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
                    <Field name="email" component={this.renderField} label="Search" />
              </form>
           </div>
      </div>

      <div className="col-md-8 col-md-offset-2 col-lg-8 col-lg-offset-2">
          <BootstrapTable data={ this.state.userDetails } options={options}>
            <TableHeaderColumn dataField='email' isKey>Email</TableHeaderColumn>
            <TableHeaderColumn dataField='familyName'>Family Name</TableHeaderColumn>
            <TableHeaderColumn dataField='givenName'>Given Name</TableHeaderColumn>
          </BootstrapTable>
    </div>
</div>

   );
 }

};

Answer 1

<Redirect />是在渲染时执行路线更改的组件。如果要在此回调函数中更改路径，则应使用history.push()方法。如果您的组件由<Route />呈现，则应将history作为道具。

您可以在此处获取有关history的更多信息：https://reacttraining.com/react-router/web/api/history

另外，不要忘记JSX转换为React.createElement(...)只返回一个React元素并且不执行任何其他操作。

Answer 2

通过定义名为redirect的状态尝试一次，然后在行上单击设置redirect的状态。

class ListView extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            userDetails: [],
            redirect: false
        }
    }

    /* your remaining code */

    render() {

        const { handleSubmit,history }=this.props;

        const options={
            onRowClick:function(row, rowIndex, columnIndex, event){
                this.setState({ redirect : true })
            }
        }

        // redirect only if the state is true
        if(this.state.redirect) {
            return(
                <Redirect to="/users/1" />
            )
        }

        return (

            <div>
                <div>
                    <NavigationBar />

                    <div className="col-md-8 col-md-offset-2 col-lg-8 col-lg-offset-2">
                        <p><b> Search Users on the Platform </b></p>
                        <form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
                                <Field name="email" component={this.renderField} label="Search" />
                        </form>
                    </div>
                </div>

                <div className="col-md-8 col-md-offset-2 col-lg-8 col-lg-offset-2">
                    <BootstrapTable data={ this.state.userDetails } options={options}>
                        <TableHeaderColumn dataField='email' isKey>Email</TableHeaderColumn>
                        <TableHeaderColumn dataField='familyName'>Family Name</TableHeaderColumn>
                        <TableHeaderColumn dataField='givenName'>Given Name</TableHeaderColumn>
                    </BootstrapTable>
                </div>
            </div>

            );
        }


}

希望这会对你有所帮助。

Answer 3

在大多数情况下使用react-router时，可能会中断未传播的事件。我在这里参加了测试，只能使用：

执行

onRowClick: (row, rowIndex, columnIndex, event) => location.href = '#/plannings';

无法使用从一个路由到另一个路由的反应引导表重定向到不同的页面

3 个答案: