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.  
}

因此，任何人都可以知道如何获取多个输入的值我可以使用属性setState。 onClick怎么样？

提前致谢!!

Answer 1

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

尝试类似：

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

Answer 2

我有一个解决这类问题的简单方法。这里的基本问题是如何将参数传递给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内创建任何动态函数，这使得它更有效。

Answer 3

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

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

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

3 个答案: