Question

我有以下问题。我有一个名为Modal的子组件，它由一个引导按钮和一个弹出窗口组成。 Modal出现在名为renderPosts的呈现组件中。

Component.js

  deleteThis(id){
    console.log("THE ID IS", id);
  }

  renderPosts(post) {
    return (
      <tr key={post.id}>

          <td className="col-md-3"> {post.id}</td>
          <td onClick = {this.deleteThis.bind(this, post.id)}>CLICK HERE</td>
          <td>
            <Modal 
                modalId="deletepost"
                className="btn btn-danger"
                onClick={this.deleteThis.bind(this,post.id)} />
          </td>

      </tr>
    );
  }

  render() {
    return (
      <div> 
        <div className="row">
          <div className="col-lg-12">
            <div>
              <table className='table table-striped header-fixed'>
                <thead>
                  <tr>
                    <th>Name</th>
                    <th> Test </th>
                    <th> Delete </th>
                  </tr>
                </thead>
                <tbody>
                   {this.props.post.map(this.renderPosts.bind(this))}
                </tbody>
              </table> 
            </div>
          </div>  
        </div>  
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {  post:state.post.all};
}

当我的模态如下所示，它运作正常。我可以通过附加到名为deleteThis的道具的onClick方法输出每个不同的id：

import React from 'react';

const Modal = ({onClick, modalId, className}) => {
    return (
        <div>
        <button 
          type="button" 
          data-dismiss="modal"
          className="btn btn-danger pull-xs-right" 
          onClick={onClick}>
         DELETE
        </button>
       </div>

    );  
}

export default Modal;

这是我被困的地方。我想在Bootstrap中使用Pop up Modal功能。下面的代码允许我获得弹出功能。但我的问题是，当我单击按钮时，onClick方法始终显示id 1。

Modal.js（带模态的引导按钮）

import React from 'react';

const Modal = ({onClick, modalId, classNameNameName}) => {
    return (
        <div>

        <button type="button" className="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

        <div id="myModal" className="modal fade" role="dialog">
          <div className="modal-dialog">
            <div className="modal-content">
              <div className="modal-footer">
                <button type="button" className="btn btn-default" data-dismiss="modal" onClick={onClick.bind(this)}>Show Id</button>
              </div>
            </div>
          </div>
        </div>
       </div>

    );  
}

export default Modal;

我认为上面代码的id始终为1的原因是因为带有onClick方法的按钮位于Modal中，只有在您单击其他按钮时才会弹出。

有没有办法可以将id绑定到上面代码中的onClick处理程序？

我想我需要做类似的事情：

  onClick={this.deleteThis.bind((this,feed.id).bind(this))} />

但我不知道如何将其转化为工作代码

Answer 1

如您所见，Modal被定义为功能无状态组件

const Modal = ({onClick, modalId, classNameNameName}) => {
    // ...

功能组件没有关键字this。

但这不是问题，真正的问题是你的所有模态元素在html中都具有相同的标识myModal，并且当你点击时会触发相同的事件在另一个元素上。

所以这是一个工作小提琴，我为模态分配了动态生成的ID 。

https://jsfiddle.net/free_soul/2ub6rmkc/

Answer 2

this变量将始终引用组件的当前实例。但是你不能绑定到纯（即功能）组件。你也不应该。只需像第一个模态那样使用onClick={onClick}。

我认为您真正的问题是您在React中尝试使用Bootstrap，这是一个基于jQuery的框架。请改为React Bootstrap。

子组件在React中没有绑定

2 个答案: