Question

这是我的代码，我想在这里做的是Modal我有两个显示和隐藏模态的方法。并且您可以看到当有人单击此AddCustomer组件（实际上是一个按钮）时将呈现模态。我想传递两个自定义函数handleConfirm和handleCancel。是可以在handleCancel和handelConfirm中访问Modal的两个方法吗？或其他好办法做这个东西？感谢。

var Modal = require('./modal.jsx');

var AddCustomer = React.createClass({
  handleClick: function(){
    $('body').append("<div id='modal-container'></div> ");
    var modal = (
        <Modal
          ref="modal"
          confirm="OK"
          cancel="Cancel"
          onConfirm={this.handleConfirm}
          onCancel={this.handleCancel}
          title="Hello, Bootstrap!">
            This is a React component powered by jQuery and Bootstrap!
        </Modal>
      );

    var modelInstance = React.render(<Modal title="test" />, document.getElementById('modal-container'));
    modelInstance.open();
  },
  handleConfirm:function(){ ??? },
  handleCancel:function(){ ??? },

  render: function() {
    return (
      <div className="ui green button" onClick={this.handleClick}>
        <i className="icon add user"></i>
        Add User
      </div>
    );
  }

});

Answer 1

这是做到这一点的方法。 handleConfirm和handleCancel是两个传递给Modal的回调，Modal将分别从onClick处理程序调用OK和取消按钮

在Modal内，应该有类似

的内容

<button onClick={this.props.onConfirm}>{this.props.confirm}</button>
<button onClick={this.props.onCancel}>{this.props.cancel}</button>

React.js：如何在作为props传入的函数中访问组件的方法？

1 个答案: