React - функция onSelect не работает при начальной реакции - PullRequest
Новая
       8

React - функция onSelect не работает при начальной реакции

0 голосов
/ 18 сентября 2018

В своем приложении я использовал «ответную загрузку».Я использовал 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>
    )
  }
}

Он работает, когда компонент загружен, но когда я нажимаю на любую вкладку, функция не вызывается.Я проверил решение Как вызывать событие на вкладках, измененное в response-bootstrap , но оно также не работает.

Ответы [ 3 ]

0 голосов
/ 18 сентября 2018

Если у вас есть фигурные скобки после имени функции, вы вызываете функцию при назначении ее свойству onSelect.

Вы можете связать функцию в конструкторе и напрямую использовать this.handleSelect:

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

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

Или оберните его в анонимную функцию: 

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

Основано на документации response-bootstrap , однако onSelect не являетсясвойство, которое принимает компонент <Tab/>, вместо этого оно должно быть помещено в обертывающий компонент <Tabs/>.

0 голосов
/ 18 сентября 2018

Согласно документации 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 /

0 голосов
/ 18 сентября 2018

Похоже, что вы не привязываете свою функцию в конструкторе, и функция может быть вызвана без (). Эти () необходимы, если вы хотите передать некоторые параметры, в противном случае не требуется

Проверьте код ниже для лучшего понимания.

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