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

Getting undefined when trying to pass data between component

本文关键字：数据 未定义 之间 组件      更新时间：2023-12-01

首先，我是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。也许我错过了什么。

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

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>
    )
  }
}

随着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>
    )
  }
}
相关文章：