Question

如何在React中切换状态？

将此视为我的状态

state = {
    ContentTab: true,
    meetupTabActive: false,
    eventbriteTabActive: false, 
    previousState: null
}

我有点希望它像我的单个链表（好吧，也许我们不能称其为链表），其中 previousState 包含与我当前活动的Tab相关的信息。

由于根据EsLint，我们可以将一个对象的属性附加到另一个对象，并且分配方法无效，因此我将我的currentActiveTab附加到componentWillMount()

componentWillMount() {
    this.setState({previousState: this.state.noneActiveTab})
}

然后在按钮上，我打算根据事件切换我的反应状态

 <p className="home-screen-second-navbar-para" onClick={() => this.changeActiveTab("meetupTabActive", this.state.previousState)}> Meetup </p>


 <p className="home-screen-second-navbar-para" onClick={() => this.changeActiveTab("eventbriteTabActive",  this.state.previousState)}> Eventbrite </p>

ActiveTab如下所示

changeActiveTab = (activeTab, previousState) => {

   this.setState({activeTab: true, this.state[previousState]: false, previousState: activeTab  })
}

我的意图是

将 activeTab 设置为 True
将先前的活动标签设置为false this.state[previousState]
将存储在 previousState

当前活动标签

但是我想我可能在这里没有正确切换状态

this.setState({activeTab: true, this.state[previousState]: false, previousState: activeTab  })
}

有人可以帮我弄清楚为什么这行不通吗？我知道有比当前方法更好的解决方案，但我想了解我在这里做错了什么。

Answer 1

我认为主要问题是您无法访问这样的对象的属性。以下代码是您做错事的示例：

let a = 'propertyName';
let obj = { a : 'b' };
obj.propertyName === undefined; // and not 'b' as you were assuming
obj.a === 'b';

相反，您必须这样做：

let a = 'propertyName';
let obj = {};
obj[a] = 'b';
obj.propertyName === 'b';

所以在您的情况下，这意味着：

changeActiveTab = (activeTab, previousState) => {
  const newState = {previousState: activeTab};
  newState[this.state[previousState]] = false;
  newState[activeTab] = true;
  this.setState(newState);
};

尽管您可能需要在依赖当前状态并调用setState时使用函数语法：

this.setState((state) => { 
  // return newState relying on state and not this.state 
});

Answer 2

使用[activeTab]: true代替activeTab: true以便将变量用作键。 this.state[previousState]也是如此。

此外，当设置基于先前状态的状态时，应使用带有功能的setState版本。

changeActiveTab = (activeTab, previousState) => {
   this.setState(state => ({[activeTab]: true, [state[previousState]]: false, previousState: activeTab}))
}

请参见https://reactjs.org/docs/react-component.html#setstate

Answer 3

据我了解，您需要类似的东西。拜托，抱歉我的样式和班级名称，但我想您可以为您更改

function App() {
  return (
    <div className="App">
      <Some />
    </div>
  );
}

const tabs = [
{name: 'first', title: 'first tab'},
{name: 'second', title: 'second tab'}
];

class Some extends React.Component {
 state = {
    activeTab: 'first'
  };
  
  handleTabClick = activeTab => {
    this.setState(prevState => ({
      ...prevState,
      activeTab
    }));
  };
  
  renderTabs = (activeTab, tabs) => (
    <section className="tabs">
      {tabs.map(({ name, title }) => (
        <div
          key={title}
          className={activeTab === name ? "tabActive" : "tab"}
          onClick={() => this.handleTabClick(name)}
        >
          <p className="tabTitle">{title}</p>
        </div>
      ))}
    </section>
  );

  render() {
    const { activeTab } = this.state;

    return <div>{this.renderTabs(activeTab, tabs)}</div>;
  }
}

// Render it
ReactDOM.render(<App />, document.getElementById("root"));

.tab {
  color: green;
}

.tabActive {
  border: 2px solid orange;
}

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

根据onclick事件切换状态

3 个答案: