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

我的项目是：当人们在章节、测试和练习等列表中单击一个

或

时，每次单击都会呈现一个呈现组件。我的问题是，是否有一种解决方案可以简化我的代码，如下所示

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

}

我的初始状态是这样的

    sectionVisilibity:false,
    practiceVisilibity:false,

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>
)

而且，国家的结构是

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

我的按钮组是这样的

    sectionVisilibity:false,
    practiceVisilibity:false,

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>
)

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

---

提前谢谢

理论上你可以对事件进行一些条件逻辑，但我认为你不想这样做

尝试以下方法：

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

createComponent（'practice'）}>practice

理论上，您可以对事件执行一些条件逻辑，但我认为您不想这样做

尝试以下方法：

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

createComponent（'practice'）}>practice

还有两种方法可以做到这一点。 首先是创建一个状态数组的对象，然后按照相同的顺序设置按钮所在的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>

this.state={
数据：[
{createSection:false}，
{createBlock:false}
]
}
onClick（e，索引，属性名称）{
让data=this.state.data；
数据[索引].propertyName=true；
this.setState（{data:data}）；
}
this.onClick（e，index，'createSection'）}>Create Section

this.onClick（e，index，'CreateBlock'）}>Create节

---

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

还有两种方法可以做到这一点。 首先是创建一个状态数组的对象，然后按照相同的顺序设置按钮所在的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>

this.state={
数据：[
{createSection:false}，
{createBlock:false}
]
}
onClick（e，索引，属性名称）{
让data=this.state.data；
数据[索引].propertyName=true；
this.setState（{data:data}）；
}
this.onClick（e，index，'createSection'）}>Create Section

this.onClick（e，index，'CreateBlock'）}>Create节

---

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

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

handleClick（电动汽车）{
const type=ev.target.dataset.clickType；
//打开类型，您就得到了解决方案
}
常量BtnGroup=（{handleClick}）=>(

节
practice
subsection
下载
test

)

如果有任何要映射到同一处理程序的单击操作。您只需添加相同的

数据，然后单击type=“attribute”

在某些情况下，需要将整个对象作为参数传递。那可以 也可以通过使用JSON.stringify`（ob）来实现

---

另外，您没有在

onClick

中创建任何动态函数，这使得它更加高效。

我有一个简单的解决此类问题的方法。 这里的基本问题是如何将参数传递给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>
                )

handleClick（电动汽车）{
const type=ev.target.dataset.clickType；
//打开类型，您就得到了解决方案
}
常量BtnGroup=（{handleClick}）=>(

节
practice
subsection
下载
test

)

如果有任何要映射到同一处理程序的单击操作。您只需添加相同的

数据，然后单击type=“attribute”

在某些情况下，需要将整个对象作为参数传递。那可以 也可以通过使用JSON.stringify`（ob）来实现

---

此外，您没有在

onClick

中创建任何动态函数，这使得它更高效。

这样编写的痛苦之处是什么？大多数情况下，您必须检查事件以确定单击了哪个

元素，并以某种方式区分它们。任何这样的代码都是非常脆弱的——如果您更改了某些内容，可能会停止工作。我认为匿名箭头函数的一些变体更容易阅读。当你说匿名箭头函数的变体时，是你刚才写的那个吗？：）这样写最痛苦的部分是什么？大多数情况下，您必须检查事件以确定单击了哪个

元素并区分它们