Question

我是React的新手，我正在尝试从onClick事件中获取所选的Tab。

下面是我的代码以及输出。

我如何实现handleSelect功能？

这是我目前的代码：

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value : 0};
  }

  getState(){
    return this.state.value;
  }

  setState(state){
    this.state = state;
  }

  handleSelect(index){
    console.log('Selected tab: ' + index);
  }

  render() {
    let selectedIndex = this.getState();

    return (
      <header className="header">
        <AppBar title="App Bar" />

        <Tabs>
          <Tab label="Core Courses" onClick={this.handleSelect(0)} />
          <Tab label="Capstone Requirement" onClick={this.handleSelect(1)}/>
          <Tab label="Computer Science Electives" onClick={this.handleSelect(2)}/>
          <Tab label="Support Courses" onClick={this.handleSelect(3)} />
        </Tabs>

      </header>
    );
  }
}

以下是呈现时的控制台日志：

Selected tab: 0
Selected tab: 1
Selected tab: 2
Selected tab: 3

Answer 1

以下代码将添加＆＃34;有效＆＃34;选择选项卡的类。希望你能用css管理它，如果你有一个＆＃34;活跃的＆＃34;选定选项卡中的类。

class Header extends React.Component {
  constructor(props) {
  super(props);
  this.state = {
    activeTab : 0
  };
  this.handleSelect = this.handleSelect.bind(this);
}

handleSelect(index){
  this.setState({
    activeTab: index
  });
}

render() {
  let selectedIndex = this.getState();

  return (
    <header className="header">
      <AppBar title="App Bar" />
      <Tabs>
        <Tab classsName={this.state.activeTab == 0 ? 'active' : ''} label="Core Courses" onClick={this.handleSelect(0)} />
        <Tab classsName={this.state.activeTab == 1 ? 'active' : ''} label="Capstone Requirement" onClick={this.handleSelect(1)}/>
        <Tab classsName={this.state.activeTab == 2 ? 'active' : ''} label="Computer Science Electives" onClick={this.handleSelect(2)}/>
        <Tab classsName={this.state.activeTab == 3 ? 'active' : ''} label="Support Courses" onClick={this.handleSelect(3)} />
    </Tabs>
  </header>
);

} }

Answer 2

可以使用Array.prototype.map生成多个<Tab/>：

class Header extends React.Component {
    constructor(props) {
        super(props);
    }

    // in ES6 we prefer to initialize state using the keyword 'static'
    static state = {
        value: 0,
    }

    // defined as an arrow fn so that 'this' inside handleSelect
    // is the 'this' of component class (lexical scoping)
    handleSelect = (index) => {
        console.log('Selected tab: ' + index);
        // this is how you update your state
        this.setState({ value: index });
    }

    render() {
        const me = this; 

        // you don't need a getter for Reading the value of state
        console.log(me.state);

        return (
            <header className="header">
                <AppBar title="App Bar" />
                <Tabs>
                    {
                        [
                        'Core Courses',
                        'Capstone Requirement',
                        'Computer Science Electives',
                        'Support Courses'
                        ].map((label, index) =>
                            <Tab
                                value={label}
                                key={index}
                                onClick={() => me.handleSelect(index)}
                            />
                        )
                    }
                </Tabs>
            </header>
        );
    }
}

Answer 3

我就是这样做的：

class Header extends React.Component {
    constructor(props) {
        super(props);
        this.state = {selectedIndex : 0};
    }

    //Use arrow functions to avoid binding
    handleSelect = (index) => {
        this.setState({selectedIndex: index}, () => {
            console.log('Selected tab: ' + this.state.selectedIndex);
        })
    }

   render() {
        const {selectedIndex} = this.state

        return (
          <header className="header">
            <AppBar title="App Bar" />

              <Tabs>
                 <Tab label="Core Courses" onClick={() =>this.handleSelect(0)} />
                 <Tab label="Capstone Requirement" onClick={() => this.handleSelect(1)}/>
                 <Tab label="Computer Science Electives" onClick={() => this.handleSelect(2)}/>
                 <Tab label="Support Courses" onClick={() => this.handleSelect(3)} />
             </Tabs>

         </header>
      );
   }
}

请注意，我已删除了getState和setState函数。这是因为在反应中你应该使用 setState（）函数来设置你的状态。还要注意我在回调中控制新状态（给setState的第二个参数）。这是因为setState不会立即更改状态，而是创建挂起状态转换。我们可以将回调传递给setState方法，该方法在状态发生变化后调用。

请参阅反应文档以获得更多理解https://facebook.github.io/react/docs/react-component.html#setstate

现在让我们继续你的getState函数。您不需要函数来访问组件的状态，而是可以使用render方法中的 this.state 来访问它。此外，组件的状态在渲染函数中永远不会改变，并且在其中保持不变，这就是为什么我认为使用 const 优先于让应该是首选。

Answer 4

您可以使用bind。

<Tab label="Core Courses1" onClick={this.handleSelect.bind(this, 0)} />
<Tab label="Core Courses2" onClick={this.handleSelect.bind(this, 1)} />
<Tab label="Core Courses3" onClick={this.handleSelect.bind(this, 2)} />

Answer 5

这是我认为更易读的方法，使用带有useState钩子的功能组件以及主要的ui Tab和Tab组件。

您可以访问当前选定的子选项卡索引作为参数传递给Tabs组件的onChange属性提供的函数处理程序。

    `const Header = ()=>{
         const[currentIndex,setCurrentIndex]=React.useState(0)

         const handleChange = (event, currentSelectedIndex) => 
               {  setCurrentIndex(currentSelectedIndex) };

          return (
              <Tabs
               value={currentIndex}
               onChange={handleChange}
             >
                   <Tab label="Core Courses"/>
                   <Tab label="Capstone Requirement"/>
                   <Tab label="Computer Science Electives"/>
                   <Tab label="Support Courses" />
              </Tabs>
                                )
                          }`

Answer 6

您可以使用https://material-ui.com/components/tabs/

中的标签

在您的代码中 `

    class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value : 0};
  }

  getState(){
    return this.state.value;
  }

  setState(state){
    this.state = state;
  }

  handleSelect(event, newValue) {
      
        this.setState({ value: newValue })
       

    }

  render() {
    let selectedIndex = this.getState();

    return (
      <header className="header">
        <AppBar title="App Bar" />

      <Paper square  >
    <Tabs value={this.state.value} indicatorColor="primary" textColor="primary" onChange={this.handleSelect}>

          <Tab label="Core Courses"  />
          <Tab label="Capstone Requirement" />
          <Tab label="Computer Science Electives"/>
          <Tab label="Support Courses"  />
        </Tabs>
 </Paper >
      </header>
    );
  }
}


    `

并且yon可以为每个标签设置onClick

React Tabs onClick获取所选Tab的索引

6 个答案: