Question

以下是我的代码。我的onClick也没有用。它总是通过错误＆＃34; Uncaught TypeError：无法读取属性＆＃39; likeQuestion＆＃39;未定义＆＃34;。但我的＆＃34; gotoPage＆＃34;功能正常。我不知道自己哪里错了。我是Reactjs的新人。为什么＆＃34;像问题＆＃34;功能无法识别。

我的第一个onClick正在运行

export default class Question extends React.Component {
  constructor(){
    super();
    this.toggle = this.toggle.bind(this);
    this.state = {
        pageNo : 1,
        dropdownOpen: false,
        questioninfo : []
      }
  }
  componentWillMount(){
     //some action
  }

  gotoPage(index) {

      //some action. This is working
    }

  toggle() {
    this.setState({
      dropdownOpen: !this.state.dropdownOpen
    });
  }

 likeQuestion(e){
    console.log('this is clicked');
    //But this is not working
 }


render() {
        var canvases = this.state.questionItem.map(function(data,i) {
          var firstLtr = data.user_name.charAt(0);

            return (
               <div key={i}>
                     <Col sm="12" md={{ size: 12, offset: 2 }} className="questionCard">
                      <Card block>
                        <CardTitle>
                                <div className="outerCircle"><span>{firstLtr}</span></div> {data.user_name}
                                <i className="fa fa-flag-o flagging" aria-hidden="true"></i>
                                <a href={data.location_url} target="_blank" className="questionLocation">{data.location_url}</a>
                        </CardTitle>
                        <CardText className="questionTxt">{data.message}</CardText>
                        <div>
                             <Button className="replyBtn" disabled>No Discussion</Button>
                             <Button size="sm" color="link" className="disussionSpan" onClick={(i) => this.likeQuestion(i)}>{data.likes} Likes</Button>
                        </div>
                      </Card>
                    </Col>
               </div>
            );
       });

    return(
      <div className="container">
        <div className="row">
        <div className="pageInfo">
        <Dropdown className="inline" isOpen={this.state.dropdownOpen} toggle={this.toggle}>
          <DropdownToggle caret>
            Pages
          </DropdownToggle>
          <DropdownMenu>
            {pgrow}
          </DropdownMenu>
        </Dropdown>
        <p className="inline currPgNo">Page: {currentPage}</p>
        </div>
            <div className="col-md-8 col-md-offset-2">

                {canvases}
            </div>
        </div>

      </div>
    )
  }

Answer 1

尝试使用arrow函数

定义辅助函数

 gotoPage = (index) => {

      //some action. This is working
    }

  toggle = () => {
    this.setState({
      dropdownOpen: !this.state.dropdownOpen
    });
  }

 likeQuestion = (e) => {
    console.log('this is clicked');
    //But this is not working
 }

或

将这些方法绑定在React组件的constructor中。 e.g

this.likeQuestion = this.likeQuestion.bind(this);
// Needs to be done for all the helper methods.

这样您就可以访问类级this上下文。

例如最小化设置

＆＃13;

class Question extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      likes:10
    };
  }


  likeQuestion = (e) => {
    
    console.log('this is clicked');
    //But this is not working
  }
  render() {

    return ( < div >
      < button size = "sm"
      color = "link"
      className = "disussionSpan"
      onClick = {
        (i) => this.likeQuestion(i)
      } > {
        this.state.likes
      }
      Likes < /button>

          < /div >
    );
  }

};

ReactDOM.render( < Question / > , document.querySelector('#test'));

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="test">
</div>

＆＃13;

Answer 2

React不会自动绑定render()内的地图，因此您必须自己动手才能使用this并致电this.likeQuestion。幸运的是，map提供了第二个参数来指定context（this）。

所以只需使用......

this.state.questionItem.map(function(data,i) {
  ...
}, this)

而不是

this.state.questionItem.map(function(data,i) {
  ...
})

选项2：在地图中使用箭头功能，例如map((data, i) => ...
选项3：将其绑定到组件构造函数中的likeQuestion。

onClick in reactjs无法正常工作

2 个答案: