反应 - 反应引导的 onSelect 功能不起作用答案

【问题标题】：React - onSelect function not working of react bootstrap反应 - 反应引导的 onSelect 功能不起作用
【发布时间】：2018-09-18 07:28:27
【问题描述】：

我在我的应用程序中使用了“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 的解决方案，但它也不起作用。

【问题讨论】：

标签： reactjs react-bootstrap

【解决方案1】：

根据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/

【讨论】：

【解决方案2】：

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

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

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>
    )
  }
}

【讨论】：

不管怎样，class 语法糖也在 ES6 中被引入。
@JamesDonnelly 抱歉，我没听懂。你能详细说明你的问题吗
您已将类构造函数中的绑定标记为“ES5”。 ES6 中引入了类和构造函数。在构造函数中绑定和使用箭头函数之间的区别只是个人喜好的不同，而不是一个与另一个相比已经过时的情况。
我同意。谢谢你。我的 ES5 和 ES6 比较只针对事件处理函数。
这就是我所缺少的，感谢您帮助我理解！

【解决方案3】：

如果函数名后面有大括号，则在将函数分配给 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，onSelect 不是<Tab/> 组件接受的属性，而是应该放置在包装<Tabs/> 组件上。

【讨论】：