javascript - 尝试在组件之间传递数据时变得不确定

Question

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

网址.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.，需要为deleteTag设置this，然后就可以通过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>
    )
  }
}