Question

我在这里没有看到任何有关我的问题的事情：在打开模态后，我有一个按钮，当点击它时，它调用另一个功能但没有任何反应。这是React的简洁示例：

_sayHi: function() {
 console.log("Hi");
}

_loop: function() {
 var foo = this.props.bar.map( function(a,b){
  return(
   <div key={a.id}>
     <button className="small button success" data-open="exampleModal1">Open</button>
     <div className="reveal" id="exampleModal1" data-reveal="">
       <h3>Are you sure</h3>
       <p>This action cannot be undone and it's final!</p>
       <button className="close-button" data-close="" aria-label="Close modal" type="button">
          <span aria-hidden="true">&times;</span>
       </button>
       <div className="f__right flex">
          <button className="small button success" onClick={this._sayHi}>Hi</button>
          <button className="small button alert" data-close="">Close</button>
      </div>
    </div>
  </div>
  )
 }.bind(this));
  return(<div>{foo}</div>)
},

render: function() {
 return(<div>{this._loop()}</div>)
}

如果我应该在模态外移动功能按钮，按钮就可以正常工作。我需要做一些特别的事吗？

我想要的：打开模态（有效），然后单击一个按钮来调用一个函数（在控制台中什么都不做，没什么。）

修改

我明白为什么这不起作用。基础知识的显示未安装在道具内部，它位于外部，因此this未被引用到我的组件中：

<div data-react-class="FooBar" data-react-props="{...}"></div> // React component
<div class="reveal-overlay></div> // Modal when closed

在这种情况下，我认为基础模态并不理想？

Answer 1

按钮将尝试默认提交，也许您可以尝试以下

_sayHi: function(e) {
 e.preventDefault();
 console.log("Hi");
}

您还应该将map函数的返回值包含在一个div中，如此

_loop: function() {
  var foo = this.props.bar.map( function(a,b){
  return(
    <div>
      <button className="small button success" data-open="exampleModal1">Open</button>
      <div className="reveal" id="exampleModal1" data-reveal="">
        <h3>Are you sure</h3>
        <p>This action cannot be undone and it's final!</p>
        <button className="close-button" data-close="" aria-label="Close modal" type="button">
          <span aria-hidden="true">&times;</span>
        </button>
        <div className="f__right flex">
          <button className="small button success" onClick={this._sayHi}>Hi</button>
          <button className="small button alert" data-close="">Close</button>
        </div>
      </div>
    </div>
  )}.bind(this));
  return(<div>{foo}</div>)
}

在基金会中使用React调用另一个函数

1 个答案: