node.js - 将函数作为 props 传递

Question

我无法理解如何在 React 中从父组件调用函数到子组件。它只是从 TestEvent 调用函数并在表单上呈现旧数据。控制不去ManageComment的组件功能。

class TestEvent extends Component{
constructor(props){
  super(props);
  this.state={
    editing:false,
    comment:this.props.comment   
  };
  this.commentRef=React.createRef(); // to create a ref to the DOM element
}

  edit(){
    this.setState({editing:true}) ;   
  }
  save(){   
    this.setState({editing:false});
    this.props.updatecomment.bind(this.commentRef.current.value,this.props.index);
  }
  remove(){   
    this.props.deletecomment.bind(this.props.index);
  }

renderNormal(){
 return(    
      <div className="commentContainer">
        <div className="commentText">{this.state.comment}</div>
        <div className="commentBtn">
        <button className="b1" onClick={this.edit.bind(this)} >Edit</button>
        <button className="b2" onClick={this.remove.bind(this) } >Remove</button>  
       </div>
      </div>
    );}
renderForm(){
  return(   
    <div className="commentContainer">
    <textarea ref={this.commentRef} defaultValue={this.state.comment}></textarea>         
      <div className="commentBtn">
      <button className="b3" onClick={this.save.bind(this)} >Save</button>        
      </div>
    </div>
  );
}
  render(){ 
   if(this.state.editing){
   return this.renderForm();
   }else{
   return this.renderNormal();
   }
  }
}

// Need to manage comments from separate component here
class ManageComment extends Component{
  constructor(props){
    super(props);
    this.state= {
      comments:[
                'First comment',
                'Second Comment',
                'Third comment'
              ]}              
  }
  // add functions to remove,edit comments from child
  // passing functions as a props
  updateComment(newComment,i){
    var arr=this.state.comments;
    arr[i]=newComment;
    this.setState({comments:arr});
  }
  deleteComment(i){
    var arr=this.state.comments;
    arr.splice(i,1);
    this.setState({comments:arr});    
  }
    render(){
      return(
            <div className="manageComment">
            {
              this.state.comments.map(function(text,i){
                return (
                  <TestEvent
                   key={i}              
                   index={i}
                   comment={text}
                   updatecomment={this.updateComment.bind(text,i)} 
                   deletecomment={this.deleteComment.bind(i)}> </TestEvent>);
              },this)            
            }
            </div>
      );
    
  }
}

。我创建了一个表单来在文本区域中输入评论，并提供编辑/保存/删除评论的选项。

我的代码的详细信息:

1. 我创建了“TestEvent”组件，其中有 3 个选项，“保存”、“删除”和“编辑”来对评论文本进行操作。
2. 然后是“ManageComment”组件，我在其中使用一些 Prop 渲染“TestEvent”，并使用名为 updatecomment 和 deletecomment 的 Prop 传递函数。
3. 最后，我将渲染“ManageComment”组件。
4. 所以基本上这里我有父组件和子组件，并且我尝试从“TestEvent”调用“ManageComment”组件的函数。

Answer 1

问题是您没有调用该函数，而只是将某些内容绑定(bind)到您的函数。例如，在您的函数中，您执行以下操作:

save = () => {   
    this.setState({editing:false});
    this.props.updatecomment.bind(this.commentRef.current.value,this.props.index);
  }

问题是 this.props.updatecomment.bind(this.commentRef.current.value,this.props.index); 不会执行您的函数，而只是绑定(bind)上下文。我建议您再看一下bind 。您想要做的是调用您的函数，而不是将某些东西绑定(bind)到它，例如this.props.updatecomment(this.commentRef.current.value,this.props.index);。

为什么你需要commentRef？您可以通过保存文本区域时调用的事件来访问文本区域的值。如果您调用该事件，您可以在 event.target 中找到数据。检查文本区域的值所在的位置。

  save = (event) {
    this.setState({editing:false});
    const commentValue = event.target
    this.props.updatecomment(commentValue, this.props.index)
  }

我的建议是让你的代码更具可读性，如果你想绑定(bind)组件的上下文，我建议你使用箭头函数

  class ManageComment extends Component{
    constructor(props){
      super(props);
      this.state= {
        comments:[
                  'First comment',
                  'Second Comment',
                  'Third comment'
                ]}              
    }
    // add functions to remove,edit comments from child
    // passing functions as a props
    updateComment = (newComment,i) =>{
      var arr=this.state.comments;
      arr[i]=newComment;
      this.setState({comments:arr});
    }
    deleteComment = (i) => {
      var arr=this.state.comments;
      arr.splice(i,1);
      this.setState({comments:arr});    
    }
      render(){
        return(
              <div className="manageComment">
              {
                this.state.comments.map(function(text,i){
                  return (
                    <TestEvent
                     key={i}              
                     index={i}
                     comment={text}
                     updatecomment={this.updateComment} 
                     deletecomment={this.deleteComment}> </TestEvent>);
                },this)            
              }
              </div>
        );
      
    }
  }

另一个建议是使用 let 和 const 而不是 var。有很多文献解释了为什么不再使用 var -> literature 是有意义的。根据经验，您可以始终使用 const ，当编译器提示时切换到 let;