javascript - React 中类似的几乎相同的 onClick 事件可以组合在一个动态 onClick 函数中吗？

Question

我的项目是:当人们点击<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 怎么样？

提前致谢!!

Answer 1

针对此类问题，我有一个简单的解决方案。 这里的基本问题是如何将参数传递给 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.stringify`(ob)

来实现

此外，您也没有在 onClick 中创建任何动态函数，这使得它更加高效。