Question

Reactjs 不能在单击按钮时提醒数据。

此代码通过显示记录帖子，评论和通过reactjs从数组中回复而正常工作。

现在，我希望能够在单击按钮时提醒帖子ID，评论ID和回复的值。为此，我创建了三个不同的单击按钮，并在道具中将其适当地传递到这里

 <input type="button" value="Alert Post Id"  onClick={this.AlertPostId(props.post.id)}  />
<input type="button" value="Alert Comment Id"  onClick={this.AlertCommentId(comment.id)}  />
<input type="button" value="Alert Reply"  onClick={this.AlertReply(reply.reply)}  />

在setstate中，我已经按照下面的代码绑定了事件处理程序

this.AlertPostId = this.AlertPostId.bind(this);
this.AlertCommentId =this.AlertCommentId.bind(this);
this.AlertReply =this.AlertReply.bind(this);

这是我设置事件处理程序的方式

AlertPostId(postid) {
alert('you clicked postid');
alert(postid);

    }


 AlertCommentId(comid) {
alert('you clicked comment id');
alert(comid);
    }




   AlertReply(reply) {
alert('you clicked reply button');
alert(reply);
    }

这是添加三个单击的按钮之后的问题。

每次运行脚本时，都会显示错误

Cannot read property 'AlertPostId' of undefined
    at Post

Cannot read property 'AlertCommentId' of undefined
    at Post

Cannot read property 'AlertReply' of undefined
    at Post

有人可以帮我吗？谢谢

下面是代码

import React, { Component, Fragment } from "react";
import { render } from "react-dom";


const Post = (props) => {
return (<React.Fragment><li >
          {props.post.id} - {props.post.content}
 <input type="button" value="Alert Post Id"  onClick={this.AlertPostId(props.post.id)}  />
        </li>
        <div>
        {props.post.comments.map((comment) => {
          return (
            <div key={comment.comid}>
              <div>{comment.comment} --- {comment.id}
<input type="button" value="Alert Comment Id"  onClick={this.AlertCommentId(comment.id)}  />
</div>
              {comment.replys && comment.replys.map((reply) => 
<div key={reply.reply}>{reply.reply}

<input type="button" value="Alert Reply"  onClick={this.AlertReply(reply.reply)}  />


</div>)}
            </div>
          )
        })}
      </div>

        </React.Fragment>
        );

};


class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      rec: [
{"id":"1","content":"first post","comments":[{"comid":"1","comment":"first comment","replys":[{"reply":"first comment reply1"},{"reply":"first comment second reply"}] }]},
{"id":"2","content":"second post","comments":[{"comid":"2","comment":"second comment", "replys":[{"reply":"second comment reply1"}] }]}
],
    };

this.AlertPostId = this.AlertPostId.bind(this);
this.AlertCommentId =this.AlertCommentId.bind(this);
this.AlertReply =this.AlertReply.bind(this);
  }




AlertPostId(postid) {
alert('you clicked postid');
alert(postid);

    }


 AlertCommentId(comid) {
alert('you clicked comment id');
alert(comid);
    }


 AlertReply(reply) {
alert('you clicked reply button');
alert(reply);
    }



  render() {
    return (
    <div>
      <h3>Records gg</h3>
      <ul> 
        {this.state.rec.map((post, i) => ( 
        <Post post={post} key={i}/>
        ))}
      </ul>
    </div>
    );
  }
}

Answer 1

应用内组件

更改

    <Post post={post} key={i}/>

收件人

     <Post post={post} key={i} AlertPostId={this.AlertPostId} AlertCommentId={this.AlertCommentId} AlertReply={this.AlertReply} />

并替换以下Post.js组件代码并尝试

   const Post = (props) => {
          return (<React.Fragment><li >
               {props.post.id} - {props.post.content}
              <input type="button" value="Alert Post Id"  onClick={() => props.AlertPostId(props.post.id)}  />
               </li>
              <div>
                {props.post.comments.map((comment) => {
               return (
                    <div key={comment.comid}>
                         <div>{comment.comment} ---     {comment.id}
                             <input type="button" value="Alert Comment Id"  onClick={() => props.AlertCommentId(comment.id)}  />
                        </div>
                     {comment.replys && comment.replys.map((reply) => 
               <div key={reply.reply}>{reply.reply}
                      <input type="button" value="Alert Reply"  onClick={() => props.AlertReply(reply.reply)}  />
               </div>)}
            </div>
             )
            })}
           </div>
           </React.Fragment>
           );
      };

单击按钮时，Reactjs无法警告数据

1 个答案: