Question

首先，我是React的新手。我有两个组件TagUtils和Urls。我正在尝试将路由器参数从Urls传递到TagUtils。这是我的代码：

Urls.jsx

// some codes....
export default class Urls extends React.Component {

render() {
 return (
   <div>
        <TagUtils  tag={this.props.params.tag_id}/>
   </div>
)
}
}

TagUtils.jsx

export default class TagUtils extends React.Component {

    deleteTag(props) {
        console.log(props.tag);
    }

    render() {
        return (
            <div className="col-xs-6 col-md-4">
                <button type="button" className="btn btn-danger" onClick={this.deleteTag}><i className="fa fa-trash"> Delete</i></button>
            </div>
        )
    }
}

当我点击“删除”按钮时，它只显示undefined。也许我错过了一些内容。

Answer 1

在您的示例中，props是event对象，其中没有tag属性 - 这就是您获得undefined的原因。您需要设置this 1}} deleteTag，然后您可以通过props方法中的this.props获取组件deleteTag

export default class TagUtils extends React.Component {
  constructor() {
     this.deleteTag = this.deleteTag.bind(this);
  } 

  deleteTag() {
    console.log(this.props.tag);
  }

  render() {
    return (
      <div className="col-xs-6 col-md-4">
        <button type="button" className="btn btn-danger" onClick={this.deleteTag}>
          <i className="fa fa-trash"> Delete</i>
        </button>
      </div>
    )
  }
}

Answer 2

随着React从createClass转移到ES6 classes，我们需要自己处理this到我们方法的正确值，如下所述：http://www.newmediacampaigns.com/blog/refactoring-react-components-to-es6-classes 更改代码，使方法在构造函数中绑定到正确的值：

export default class TagUtils extends React.Component {
  constructor(props) {
      super(props);
      this.deleteTag = this.deleteTag.bind(this);
  }

  deleteTag(props) {
    console.log(props.tag);
  }

  render() {
    return (
        <div className="col-xs-6 col-md-4">
            <button type="button" className="btn btn-danger" onClick={this.deleteTag}><i className="fa fa-trash"> Delete</i></button>
        </div>
    )
  }
}

no autobinding是React家伙为ES6课程刻意迈出的一步。 React.createClass提供了自动绑定到正确的上下文。有关详细信息，请访问：https://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html#autobinding

因此，基于此，您还可以将代码更改为：

export default class TagUtils extends React.Component {
  deleteTag = (props) => {
    console.log(props.tag);
  }

  render() {
    return (
        <div className="col-xs-6 col-md-4">
            <button type="button" className="btn btn-danger" onClick={this.deleteTag}><i className="fa fa-trash"> Delete</i></button>
        </div>
    )
  }
}

尝试在组件之间传递数据时获取未定义

2 个答案: