如何调用从孩子撑起阵营15.5.0

Question

你好，我是想传递函数子类和子类调用它，但问题也显示父函数的功能是不确定的

无法读取未定义

这里财产 'removeComment' 是我的代码

父类：

import React from 'react'; 
import Navbar from './notes'; 

export default class Board extends React.Component { 
    constructor(props, context) { 
     super(props, context); 
     this.state = { 
      comments: [ 
       'Kingyyy', 
       'React', 
       'Learning' 
      ] 
     }; 
    } 
    removeComment() { 
     console.log(i); 
     var arr = this.state.comments; 
     arr.splice(i,1); 
     this.setState({comments: arr}); 
    } 
    editComment(newtext, i) { 
     console.log(i); 
     var arr = this.state.comments; 
     arr[i] = newtext; 
     this.setState({comments: arr}); 
    } 
    addComment() { 
     var text = prompt('enter the new '); 
     var arr = this.state.comments; 
     arr[arr.length] = text; 
     this.setState({comments: arr}); 
    } 
    eachComment(elem, i) { 
     return (
      <Navbar key={i} index={i} editComment={(newtext, i) => this.editComment.bind(this)} removeComment={(i) => this.removeComment.bind(this)}> 
       {elem} 
      </Navbar> 
     ); 
    } 
    render() { 
     return (
      <div> 
      <button onClick={this.addComment} className="btn btn-success">add new comment</button> 
      <br /> 
       { 
        this.state.comments.map(this.eachComment) 
       } 
      </div> 
     ); 
    } 
} 

子类：

import React from 'react'; 

export default class Navbar extends React.Component { 
    edit() { 
     this.setState({ 
      edit: !this.state.edit 
     }) 
    } 
    save() { 
     var value = this.refs.newtext.value; 
     this.props.editComment(value,this.props.index); 
     this.setState({ 
      edit: !this.state.edit 
     }) 
    } 
    remove() { 
     this.props.removeComment(this.props.index); 
    } 
    constructor(props, context) { 
     super(props, context); 
     this.state = {edit: false}; 
    } 
    normal() { 
     return (
      <div> 
       <h1>{this.props.children}</h1> 
       <button className="btn btn-info" onClick={this.edit.bind(this)}> 
        edit 
       </button> 
       <button className="btn btn-danger" onClick={this.remove.bind(this)}> 
        remove 
       </button> 
      </div> 
     ); 
    } 
    editing() { 
     return (
      <div> 
       <textarea ref="newtext" defaultValue={this.props.children}></textarea> 
       <br/> 
       <button className="btn btn-success" onClick={this.save.bind(this)}> 
        save 
       </button> 

      </div> 
     ); 
    } 
    render() { 
     if (this.state.edit) { 
      return this.editing(); 
     } else { 
      return this.normal(); 
     } 
    } 
} 

Answer 1

的问题是，你正在失去你的反应环境。更改构造函数子类本

constructor(props, context) { 
    super(props, context); 
    this.state = {edit: false}; 
    this.normal = this.normal.bind(this) 
    this.editing = this.editing .bind(this) 
} 

您在删除呼叫调用.bind（本）......但是this要绑定没有与状态的反应环境和道具

一些优化，我建议..

定义功能内嵌的lambda所以你不要每次都调用.bind（这）对每一个功能...又名

edit =() => { 
    this.setState({ 
     edit: !this.state.edit 
    }) 
} 
save =() => { 
    var value = this.refs.newtext.value; 
    this.props.editComment(value,this.props.index); 
    this.setState({ 
     edit: !this.state.edit 
    }) 
} 
remove =() => { 
    this.props.removeComment(this.props.index); 
} 
normal =() => { 
    return (
     <div> 
      <h1>{this.props.children}</h1> 
      <button className="btn btn-info" onClick={this.edit}> 
       edit 
      </button> 
      <button className="btn btn-danger" onClick={this.remove}> 
       remove 
      </button> 
     </div> 
    ); 
} 
editing =() => { 
    return (
     <div> 
      <textarea ref="newtext" defaultValue={this.props.children}></textarea> 
      <br/> 
      <button className="btn btn-success" onClick={this.save}> 
       save 
      </button> 

     </div> 
    ); 
} 

---

在父类中更改如何传递函数。尽量避免内联lambdas作为元素或反应类的属性（在渲染中）。随着网站变得越来越复杂，它会导致性能问题。

eachComment = (elem, i) => { 
    return (
     <Navbar key={i} index={i} editComment={this.editComment} removeComment={this.removeComment}> 
      {elem} 
     </Navbar> 
    ); 
} 

如果你需要自定义变量传递到被联定义可以使用.bind通过，而不是一个拉姆达通过他们（绑定是很多比拉姆达更高性能的一个函数...又名

someList.map((item, i) => <SomeElement onUserClick={this.handleUserClick.bind(null, item) />); 

.bind()的第一个参数是上下文this可以传递null未覆盖的背景。然后你可以通过任何其他函数的自变量是参数扩展在调用呼叫。