Question

我来自jQuery所以我遇到了解如何解决这个问题的问题。

我在React中编写了一个应用程序，我正在使用inline个样式，即每个组件都有自己的样式，并且用JS而不是CSS编写。< / p>

现在，我有五个标签，每当我点击其中一个标签时，我想切换.is-active。所以点击后，我必须从旧类中删除.is-active，然后将其添加到单击的类中。我不确定如何使用inline样式来处理这个问题，因为因为所有内容都是inline，所以没有实际的类可以添加到我的标签中。

现在，当我渲染每个标签（我作为一个单独的组件）时，我还传入一个isActive布尔值，告诉组件使用或不使用活动类进行渲染。代码示例：

HTML：

<Tab isActive={true} />
<Tab isActive={false} />

JS：

<div className="tab" style={(this.props.isActive !== true) ? style.tab : {...style.tab, ...style.active}}>

但我完全迷失了如何做这个onclick。我是否必须打破内联样式概念才能做到这一点，还是有智能解决方案？我没有在网上找到任何直接的东西。谢谢！

Answer 1

您可以使用state进行此类实施。简要实现如下：

假设您有两个标签。您应该在constructor上定义状态，如下所示：

constructor(props){
  super(props)
  this.state = {
    tabs = [
      { tab1: { active: true } },
      { tab2: { active: false} }
    ]
  }
  this.tabToggle = this.tabToggle.bind(this)
}

将标签元素放入render()：

render() {
  return (
    <div>
      { this.state.tabs.map((tab, index) => 
        <div className={'tab ' + tab.active ? 'active' : ''}>
             onClick={()=>this.tabToggle(index)}>
        </div>
      )}
    </div>
  )
}

定义切换功能，如下所示：

tabToggle(tabIndex) {
  let tabs = this.state.tabs
  tabs[tabIndex] = true
  tabs.map((tab, index) => {
    if (index !== tabIndex) tab.active = false
  })
  this.setState( tabs )
}

部分代码的一些参考：

Answer 2

阿米尔穆罕默德（Amirmohammad）有一个很好的答案，但这是一种简化解决方案并使您的代码更加干燥的解决方案：

使用<div class="box"> <h1>Foretag et opkald via Remote Control</h1> <input type="number" id="dial"> <a id="call" href="" target-"null">Start opkald til <span id="tel"></span> </div> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8=" crossorigin="anonymous"></script> <script> $('#dial').on('input', function() { $('#tel').html($(this).val()) $('#call').attr("href", "http://192.168.6.91/servlet?key=number=" + $(this).val() + "&outgoing_uri=9081@213.128.137.88") console.log($(this).val()) // get the current value of the input field. }); </script>属性声明状态（您甚至可以省略构造函数）。

activeTab

呈现选项卡时，可以在className中使用三元运算符（带有模板文字，我觉得它更具可读性）。

state = {
  activeTab: 'tab1',
  tabs: [
    'tab1',
    'tab2',
    'tab3'
  ]
}

最后，我们有一个handleTabClick函数来更新状态。

render() {
  return (
    <div>
      { this.state.tabs.map((tab, index) =>
        <div
          key={`tab-${index}`}
          className={ `tab ${this.state.activeTab === tab ? 'active' : ''}` }
          id={tab}
          onClick={this.handleTabClick}
        >
          {tab}
        </div>
      )}
    </div>
  )
}

使用内联样式反应在不同选项卡上切换活动状态

2 个答案: