Question

我是React.js的新手。您能否通过下面的代码帮助我，在这些代码中我需要管理每个选项卡的状态？

state = {
    selected: false
}
handleChange = () => {
    this.setState({
        selected: true
    })
}

render (){
    return (
        <div>
            <ul className={styles.tabsResultsTabs}>
                <li onClick={this.handleChangeTab} className={this.state.selected ? styles.active : null}>Home</li>    
                <li onClick={this.handleChangeTab} className={this.state.selected ? styles.active : null} id="2">Post</li>
                <li onClick={this.handleChangeTab} className={this.state.selected ? styles.active : null} id="3">Contact us</li>
                <li onClick={this.handleChangeTab} className={this.state.selected ? styles.active : null} id="4">About</li>
            </ul>
        </div>
    )
}

以上代码无效。因此，我需要在单击时在活动选项卡之间切换样式。

Answer 1

state = {
  selected: 0
}
handleChangeTab = (i) => {
this.setState({
  selected: i
})
}

render ()
{
return (
<div>
<ul className={styles.tabsResultsTabs}>

<li onClick={()=>this.handleChangeTab(0)} className={this.state.selected===0 ? styles.active : null}>Home</li>

<li onClick={()=>this.handleChangeTab(1)} className={this.state.selected===1 ? styles.active : null} id="2">Post</li>

<li onClick={()=>this.handleChangeTab(2)} className={this.state.selected===2 ? styles.active : null} id="3">Contact us</li>

<li onClick={()=>this.handleChangeTab(3)} className={this.state.selected===3 ? styles.active : null} id="4">About</li>

</ul>
</div>

我不确定我的回答是否值得推荐，但希望对您有所帮助。

Answer 2

您可以通过几种方式实现这一目标。我认为为每个标签设置一个状态值是有意义的。这就提供了更多功能的可能性。

我添加的内容：

处于组件状态的每个选项卡的状态值。
我们标记中每个选项卡的名称属性，其中一个与我们的状态。
一个事件处理程序，它将找到被单击的选项卡的名称并在我们的组件状态下动态找到具有匹配项的键名称。这将使我们能够切换活动和非活动标签。

以下也是代码沙箱，因此您可以对其进行测试：https://codesandbox.io/s/jolly-lewin-1vl6z

class App extends React.Component {
  state = {
    home: false,
    post: false,
    contact: false,
    about: false
  };

  handleChangeTab = event => {
    let tabName = (event.target.getAttribute("name"));
    let initialState = {
      home: false,
      post: false,
      contact: false,
      about: false
    };

    this.setState({
      ...initialState,
      [tabName]: true
    });
  };

  render() {
    return (
      <div>
        <ul>
          <li
            onClick={this.handleChangeTab}
            className={this.state.home ? "active" : null}
            name="home"
          >
            Home
          </li>
          <li
            onClick={this.handleChangeTab}
            className={this.state.post ? "active" : null}
            name="post"
          >
            Post
          </li>
          <li
            onClick={this.handleChangeTab}
            className={this.state.contact ? "active" : null}
            name="contact"
          >
            Contact us
          </li>
          <li
            onClick={this.handleChangeTab}
            className={this.state.about ? "active" : null}
            name="about"
          >
            About
          </li>
        </ul>
      </div>
    );
  }
}

Answer 3

您也可以这样实现。

template <typename T>
class Stack
{
        struct Unit
    {
        Unit *prev;
        T value;
        Unit(T value);
    };
public:
    Stack();
    void Push(T value);
    int Count();
    T Top();
    T Pop();
    ~Stack();
private:
    unsigned int count;
    Unit *top;

};

template<typename T>
Stack<T>::Unit::Unit(T value)
{
    this->value = value;
    prev = nullptr;
}

template<typename T>
Stack<T>::Stack()
{
    top = nullptr;
    count = 0;
}

template<typename T>
void Stack<T>::Push(T value)
{
    if (top == nullptr)
    {
        top = new Unit(value);
    }
    else
    {
        Unit *tmp = new Unit(value);
        tmp->prev = top;
        top = tmp;
    }
    count++;
}

template<typename T>
T Stack<T>::Pop()
{
    T value = top->value;
    Unit *tmp = top->prev;
    delete top;
    top = tmp;
    count--;
    return value;
}

template<typename T>
Stack<T>::~Stack()
{
    Unit *curr = top;
    if (!curr)
    {
        return;
    }
    while (curr)
    {
        Unit* tmp = curr->prev;
        delete curr;
        curr = tmp;
    }
}

我需要管理每个选项卡的状态

3 个答案: