代码之家 › 专栏 › 技术社区 › Nannnnnnn

在React中,类似的几乎相同的onClick事件是否可以组合在一个动态onClick函数中?

onclick reactjs javascript

Nannnnnnn · 技术社区 · 6 年前

我的项目是:当人们点击 <button> 或 <li> 在节、测试和练习等列表中,每次单击都将呈现一个呈现组件。我的问题是,是否有一种解决方案可以简化我的代码,如下所示。

    createSection = () => {
this.setState({
  sectionVisilibity: !this.state.sectionVisilibity
})

}

    createPractice = () => {
this.setState({
  practiceVisilibity: !this.state.practiceVisilibity
})
}

我的初始状态是这样的

    sectionVisilibity:false,
    practiceVisilibity:false,

国家的结构是

this.state={ 
          .....,
          sections:[
             sec1:{name:'',description:''},
             sec2:{...}
           ]
    }

我的按钮组是这样的

const BtnGroup = ({ createSection, createPractice }) => (
  <ul>
    <li onClick={createSection}>Section</li>
    <li onClick={createPractice}>Practice</li>
    <li onClick={createSubSec}>Subsection</li>
    <li onClick={createDownload}>Download</li>
    <li onClick={createTest}>Test</li> 
  </ul>
)

有没有一种方法我可以这样写

createComponent=()=> {
 //conditionally decide the click action by click event
 //The thing I confused about is I did not pass any event here, but the click is work. It can change the flag between true and false.  
}

所以,任何人都知道如何像多个输入一样获取值,我可以使用属性来设置状态。onClick怎么样?

提前谢谢!!

3 回复 | 直到 6 年前

hannad rehman 6 年前

对于这种问题,我有一个简单的解决方案。这里的基本问题是如何将参数传递给onClick函数。

在这种情况下,我要做的是使用数据属性。

    handleClick(ev){
       const type = ev.target.dataset.clickType;
       // switch on type and you got the solution

    }


     const BtnGroup = ({ handleClick }) => (
             <ul>
                    <li data-click-type="session" onClick={handleClick}>Section</li>
                    <li data-click-type="practice" onClick={handleClick}>Practice</li>
                    <li data-click-type="subsection" onClick={handleClick}>Subsection</li>
                    <li data-click-type="download" onClick={handleClick}>Download</li>
                    <li data-click-type="test" onClick={handleClick}>Test</li> 
            </ul>
                )

如果有任何要映射到同一处理程序的单击操作。您只需添加相同的 data-click-type ="attribute"

在某些情况下,需要将整个对象作为参数传递。那可以也可以通过使用JSON来实现。字符串化`(ob)

此外,您没有在内部创建任何动态函数 onClick 这使得它更高效。

john_omalley 6 年前

理论上你可以对这个事件做一些条件逻辑,但我认为你不想这么做。

尝试以下操作:

    <li onClick={() => createComponent('practice')}>Practice</li>

amitchauh4n 6 年前

还有两种方法可以做到这一点。首先是制作一个状态数组的对象,然后按照相同的顺序设置按钮所在的li标记。并单击“发送索引”,以便在索引的基础上更改状态。第二个是相同的,在对象数组中获取您的状态,然后单击“发送名称”,也类似于上面的答案。在您的函数中,您可以使用seitch case或if else条件,通过名称单击哪个按钮。

this.state = {
  data: [
          {createSection:false},
          {createBlock:false}
        ]
}

onClick(e,index,propertyName){
  let data = this.state.data;
  data[index].propertyName = true;
  this.setState({data:data});
}

<li key={index}> <button onClick 
 {(e)=>this.onClick(e,index,'createSection')}> Create Section </button> 
</li>
<li key={index}> <button onClick=
 {(e)=>this.onClick(e,index,'CreateBlock')}> Create Section </button> 
</li>

请记住,按钮顺序必须与状态相同。