Question

关于代码的一些上下文。我目前有一个对象数组，它们在循环中相应地填充按钮的标签，图标和id。我遇到的麻烦是点击后选择按钮。每次我点击一个按钮，我都会得到以下错误：

TypeError：_this2.props.bind不是函数

我的代码如下：

import React, {Component} from 'react'
import propTypes from 'prop-types'
import Button from 'components/button'
import './segmentedButtons.scss'

class segmentedButtons extends Component {
  onChange = (displayLabels) => {
    console.log(displayLabels)
    //this.props.onChange({ label: displayLabels.label, icon: displayLabels.icon, id: displayLabels.id })
  }

  render() {
    const {displayLabels} = this.props.labels
    const classPrefix = this.props.view
    var renderLabels = [];
    for (var i = 0; i< this.props.labels.length; i++){
        renderLabels.push(<Button
        label={this.props.labels[i].title}
        icon={this.props.labels[i].icon}
        id={this.props.labels[i].id}
        onClick={() => this.onChange(this.props.bind(this,i))}
      />)
    }

    return (
      <div className={classPrefix+"-buttons "+ "segmentedButtons-buttons"}>
          {renderLabels}
      </div>
    )
  }
}

segmentedButtons.propTypes = {
  displayLabels: propTypes.arrayOf(propTypes.shape({
    label: propTypes.string,
    icon: propTypes.string,
    id: propTypes.number,
    onClick: propTypes.func
  })),
}

export default segmentedButtons

Answer 1

就像Andrew提到的那样，最好的方法可能是我们使用箭头功能： onClick={() => this.onChange(i)}。

如果你想使用bind，可以这样做：onClick={this.onChange.bind(this, i)}。

Answer 2

试试这个：

const onChangeGen = (i) => () => this.onChange(i)

然后

onClick={onChangeGen(i)}

从按钮获取名称单击React

2 个答案: