将onChange函数绑定到复选框的问题

时间:2017-11-06 21:19:57

标签: reactjs conditional

我试图将函数绑定到OnChange复选框事件。我收到的错误消息说我创建的doClick函数不是函数。我完全被困在这里了。我的代码......

export class LocalGroupsTabContent extends React.Component {

  doClick(index, event) {
    this.props.click(index);
  }

  render() {
    let activeClass = this.props.activeId;

    let content = this.props.data.map((item, index) => {
      return (
        <div className={'tabs-textItem ' + (activeClass === index ? 'show' : '')} >
          <div className="tabs-third-level-menu">
            <div className="container">
              {item.links.map((link, index) => {
                return (
                  <label key={ index } className="control control--checkbox">{link}
                    <input type="checkbox" onChange={this.doClick.bind(this, index)} />
                    <div className="control__indicator"></div>
                  </label>
                )
              })}
            </div>
          </div>
        </div>
      )
    });

    return (
      <div className="tabs-content">{content}</div>
    );
  }
}

1 个答案:

答案 0 :(得分:0)

问题不在于你的doClick方法,而在于你在其中指定的点击方法。

在这种方法中:

from natsort import natsort_keygen, ns
l1 = ['D1', 'E1', 'S1', 'S4', 'S6', 'C1', 'S2', 'D2', 'C2', 'E2', 'W373']
natsort_key1 = natsort_keygen(key=lambda y: y.lower())
l1.sort(key=natsort_key1)
l1

# Gives: 
['C1', 'C2', 'D1', 'D2', 'E1', 'E2', 'S1', 'S2', 'S4', 'S6', 'W373']

您遇到的问题是您没有指定点击方法道具。

通过道具传递一个点击方法(虽然我建议改为使用onClick处理程序),或者处理组件中的click事件。请看我的例子:

https://codesandbox.io/s/mo7j742kkj