Question

我在HTML / JSX中有以下结构

while True:

    number = input("Enter a 7 digit number please.")
    if len(number) == 7:
        try:
            number = int(number)
        except ValueError:
            print("Please enter a number")
        else:
            break
    else:
        print("Please enter a valid number.")

print(number) #DELETE THIS BIT LATER!
i = 0
total = 0

while (i < 7 == True):
    global total
    f = str(number)[i]
    if int(f) % 2 == 1:
        total = total + int(f) * 3
    else:
        total = total + int(f)
    i += 1

print(total)

mOf10 = 0

while True:
    global mOf10
    if mOf10 >= total:
        break
    else:
        mOf10 += 10

finalD = mOf10 - total
print(finalD)

我想在我点击的<ul> <li className="active">Tab 1</li> <li>Tab 2</li> <li>Tab 3</li> </ul>元素上添加类名"active"。例如：点击标签2应该从<li>中移除课程"active"并将其添加到tab1。

在此处粘贴我的反应代码以便更好地理解。

tab2

如何使用React方式实现此功能？我不想使用任何其他外部库.TIA。

Answer 1

您可以在组件状态中存储活动选项卡索引，并在单击选项卡后更改它。看看这个工作示例，它解释了使用React.js标签行为的一般原则 - https://jsfiddle.net/t9ss04jL/

x_t = x_0 * P^t

Answer 2

React就是组件。在这种情况下，我建议您创建特定且可重复使用的组件，例如return new Uri(HttpUtility.HtmlDecode(clienturl).ToString());和Tab。好的一点是，您的代码更清晰，更容易理解。您只需使用TabBar跟踪当前标签。

＆＃13;

state

＆＃13;

const Tab = ({ active, children, onClick }) => 
  <li className={active ? 'active' : ''} onClick={onClick}>{children}</li>

class TabBar extends React.Component {
  constructor() {
    super()
    
    this.state = { activeTabIndex: 0 }
    
    this.changeTab = this.changeTab.bind(this)
  }
  
  changeTab(index) {
    this.setState({ activeTabIndex: index })
  }

  render() {
    const { activeTabIndex } = this.state
    
    return (
      <div>
        <ul>
          <Tab active={activeTabIndex === 0} onClick={this.changeTab.bind(this, 0)}>Tab 1</Tab>
          <Tab active={activeTabIndex === 1} onClick={this.changeTab.bind(this, 1)}>Tab 2</Tab>
          <Tab active={activeTabIndex === 2} onClick={this.changeTab.bind(this, 2)}>Tab 3</Tab>
        </ul>
      </div>
    )
  }
}

ReactDOM.render(<TabBar />, document.getElementById('root'))

＆＃13;

#root li {
 display: inline-block;
 margin: 0 10px;
}

#root li.active {
  background-color: red;
  color: white;
  font-weight: bold;
}

＆＃13;

Answer 3

您可以使用该组件的状态，并且由于您从组件本身调用方法，因此您无需在构造函数中绑定它们。以下是使用函数生成的解决方案：

import React, { Component } from 'react';

export default class Tab extends Component {
    constructor(props){
        super(props);
        this.state = { tabActive: 1 };
    }

    /**
     * Function generator to handle switching tab with tabIndex
     * 
     * @param {number} tabIndex 
     * @returns {function}
     * @memberof Tab
     */
    changeTab(tabIndex) {
        return () => {
            this.setState({ tabActive: tabIndex });
        };
    }

    /**
     * determines the class name based on the active tab
     * 
     * @param {number} tabIndex 
     * @returns {string}
     * @memberof Tab
     */
    getClassName(tabIndex) {
        return (this.state.tabActive === tabIndex ? 'active' : '');
    }

    render() {
        return (
            <div>
                <ul>
                    <li className={ this.getClassName(1) }
                        onClick={ this.changeTab(1) }>
                        Tab 1
                    </li>
                    <li className={ this.getClassName(2) }
                        onClick={ this.changeTab(2) }>
                        Tab 2
                    </li>
                    <li className={ this.getClassName(3) }
                        onClick={ this.changeTab(3) }>
                        Tab 3
                    </li>
                </ul>
            </div>
        );
    }
}

如何在React中实现选项卡功能

3 个答案: