未指定必需的prop`onClick` //无法读取属性'bind'

时间:2016-09-15 00:27:44

标签: javascript reactjs

我正在尝试将'handleWordClick'函数传递给组件,但我不断收到未指定proptype的错误。当我尝试用.bind

传递道具时
'this.handleWordClick.bind(this)'

...我收到的错误无法读取属性'bind'。

这个错误可能是由于我缺乏知识,但是会感激一些帮助。

感谢。

以下是容器代码的一部分:

handleWordClick: function () {
  this.setState({ isModalOpen: true });
},

handleCloseModalClick: function () {
  this.setState({ isModalOpen: false });
},

renderBookPage: function(which) {
  var book = this.state.book;

  return book[which].map(function (page, index) {
    return <WordWrapper
      key={index}
      page={page}
      onClick={this.handleWordClick} />
  })
},

这是我试图传递'onClick'道具的组件:

function WordWrapper (props) {
  return (
    <span style={styles.cursorPointer} onClick={props.onClick}>{props.page.word}</span>
  )
}

WordWrapper.propTypes = {
  page: PropTypes.shape({
    word: PropTypes.string.isRequired
  }),
  onClick: PropTypes.func.isRequired
}

module.exports = WordWrapper;

1 个答案:

答案 0 :(得分:2)

试试这个

var _this = this;
return book[which].map(function (page, index) {
return <WordWrapper
  key={index}
  page={page}
  onClick={_this.handleWordClick} />
})

出错的原因是,this内的.map()是指map()而不是React.createClass()