代码之家 › 专栏 › 技术社区 › Vishal

react-onselect函数不工作

react-bootstrap reactjs

Vishal · 技术社区 · 6 年前

我在应用程序中使用了“react bootstrap”。我用过 Tab Component . 我想要选项卡组件的onSelect函数。

下面是我的组件代码

export default class Users extends Component {
  handleSelect() {
    console.log("Tab selected")    
  } 

  render() {
    return(
      <div className="welcome-wrap">
        <br />
        <div className="row">
          <h3>Users</h3>
          <Tabs defaultActiveKey={1} animation={false} id="user-role-tab">
            <Tab eventKey={1} title="Root Users" className="
            " onSelect={this.handleSelect()}>
              <RootUser/>
            </Tab>
            <Tab eventKey={2} title="Organization Users" onSelect={this.handleSelect()}>
              <OrganizationUser/>
            </Tab>
            <Tab eventKey={3} title="Business Users" onSelect={this.handleSelect()}>
              <BusinessUser/>
            </Tab>
          </Tabs>
        </div>
      </div>
    )
  }
}

它在加载组件时工作,但是当我单击任何选项卡时,函数都不会被调用。我检查了 How to call an event on tabs changed in react-bootstrap 但它也不起作用。

3 回复 | 直到 6 年前

Abin Thaha 6 年前

按照 react-bootstrap 文档。 onSelect 是的财产 Tabs 不是 Tab . 这样地:

<Tabs
    activeKey={this.state.key}
    onSelect={this.handleSelect} //For Tabs
    id="controlled-tab-example"
>
    <Tab eventKey={1} title="Tab 1">
        Tab 1 content
        </Tab>
    <Tab eventKey={2} title="Tab 2">
        Tab 2 content
        </Tab>
    <Tab eventKey={3} title="Tab 3" disabled>
        Tab 3 content
        </Tab>
</Tabs>

参考 https://react-bootstrap.github.io/components/tabs/

Hemadri Dasari 6 年前

看起来您没有在构造函数中绑定函数,可以在没有()的情况下调用函数。当您想传递一些参数时,这些()是必需的,否则不需要。

检查下面的代码以获得更好的理解。

ES5:

export default class Users extends Component {

  constructor(props){
     super(props);
     this.handleSelect = this.handleSelect.bind(this);
  }
  handleSelect() {
    console.log("Tab selected")    
  } 

  render() {
    return(
      <div className="welcome-wrap">
        <br />
        <div className="row">
          <h3>Users</h3>
          <Tabs defaultActiveKey={1} animation={false} id="user-role-tab">
            <Tab eventKey={1} title="Root Users" className="
            " onSelect={this.handleSelect}>
              <RootUser/>
            </Tab>
            <Tab eventKey={2} title="Organization Users" onSelect={this.handleSelect}>
              <OrganizationUser/>
            </Tab>
            <Tab eventKey={3} title="Business Users" onSelect={this.handleSelect}>
              <BusinessUser/>
            </Tab>
          </Tabs>
        </div>
      </div>
    )
  }
}

ES6:如果使用箭头函数,则不需要绑定

export default class Users extends Component {

  constructor(props){
     super(props);
  }
  handleSelect = () => {
    console.log("Tab selected")    
  } 

  render() {
    return(
      <div className="welcome-wrap">
        <br />
        <div className="row">
          <h3>Users</h3>
          <Tabs defaultActiveKey={1} animation={false} id="user-role-tab">
            <Tab eventKey={1} title="Root Users" className="
            " onSelect={this.handleSelect}>
              <RootUser/>
            </Tab>
            <Tab eventKey={2} title="Organization Users" onSelect={this.handleSelect}>
              <OrganizationUser/>
            </Tab>
            <Tab eventKey={3} title="Business Users" onSelect={this.handleSelect}>
              <BusinessUser/>
            </Tab>
          </Tabs>
        </div>
      </div>
    )
  }
}

James Donnelly 6 年前

如果函数名后有大括号,则在将函数分配给 onSelect 财产。

您可以在构造函数中绑定函数并直接使用 this.handleSelect :

constructor() {
  super();
  this.handleSelect = this.handleSelect.bind(this);
}

render() {
  return (
    ...
    <Tab onSelect={this.handleSelect}>
  )
}

或者用匿名函数包装它:

<Tab onSelect={(event) => this.handleSelect(event)}>

基于 react-bootstrap documentation 然而, 单选择 不是属性 <Tab/> 组件接受,而应该放在包装上 <Tabs/> 组件。