Input ref in modal problem

[detrandix]

Hello, in this code in renderOverlay function:

<Modal title="Modal Title" onRequestHide={this.handleToggle}>
    <div className="modal-body">
        <Input
            type="text"
            defaultValue={this.props.defaultValue}
            ref="input" />
    </div>
    <div className="modal-footer">
        <Button onClick={this.handleToggle}>Close</Button>
        <Button bsStyle="primary" onClick={this.saveChange}>Save change</Button>
    </div>
</Modal>

i get following error:

Uncaught Error: Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. This usually means that you're trying to add a ref to a component that doesn't have an owner (that is, was not created inside of another component's `re...<omitted>...f. 

Is there any solution, how to ref input in modal body?

[verma]

Can't believe I encountered the exact same problem today :). I just ended up using ModalTrigger, gives me more flexibility.

var openGreyhoundPipelineButton = (
    <ModalTrigger modal={<OpenGreyhoundPipeline />}>
        <Button bsStyle="default" bsSize="small" className="btn-block">Open</Button>
    </ModalTrigger>
);

[pieterv]

Hey @detrandix, this error is happening because everything returned from renderOverlay is rendered via React.renderComponent within a different tree (on the body) so the refs from the class you are in cannot reference it. You can get around this by making a modal component which uses refs then render the modal component within renderOverlay.

var MyModal = React.creacteClass({
  render: function() {
    return (
      <Modal title="Modal Title" onRequestHide={this.props.onToggle}>
          <div className="modal-body">
              <Input
                  type="text"
                  defaultValue={this.props.defaultValue}
                  ref="input" />
          </div>
          <div className="modal-footer">
              <Button onClick={this.props.onToggle}>Close</Button>
              <Button bsStyle="primary" onClick={this.props.onSaveChange}>Save change</Button>
          </div>
      </Modal>
    );
  }
});

// renderOverlay
return (
  <MyModal onToggle={this.handleToggle} onSaveChange={this.saveChange} />
);

You will probably need some extra code to pass the value out on save, but you get the idea :)

[NicoleY77]

+1

[chrismcv]

Is there a solution to this yet? Launching the modal manually is still problematic for me? Or am I supposed to clean up refs on close?

[NourSammour]

@chrismcv just wrap the form that you have inside new componenet

var React = require("react"),
  Modal = require('react-bootstrap').Modal,
  Input = require('./../../controls/input.jsx'),
  Async = require('async'),
  Button = require('react-bootstrap').Button,
  OverlayMixin = require('react-bootstrap').OverlayMixin,
  Fluxxor = require("fluxxor"),
  FluxMixin = Fluxxor.FluxMixin(React),
  AddDeviceForm = require('./new-device-form.jsx'),
  StoreWatchMixin = Fluxxor.StoreWatchMixin;

var MobileDeviceModal = React.createClass({
  mixins: [FluxMixin, StoreWatchMixin("MobileDeviceStore"), OverlayMixin],
  getInitialState: function () {
    return {
      isModalOpen: false
    };
  },
  getStateFromFlux() {
    return {}
  },
  render: function () {
    return (
      <a href="javascript:void(0)" onClick={this.handleToggle}  className="pull-right">if your mobile not exist in the list you can add it here </a>
    );
  },
  handleToggle() {
    this.setState({
      isModalOpen: !this.state.isModalOpen
    });
  },
  renderOverlay: function () {
    if (!this.state.isModalOpen) return (<span></span>);
    var flux = this.getFlux();
    return (<Modal onRequestHide={this.handleToggle}   bsSize="large" animation={false}>
      <div className="modal-body" >
        <div className="col-md-8 col-md-offset-2" >
          <div className="item-container card" >
            <div className="item-wrapper card-body">
              <div className="row">
                <div className="col-md-10 col-md-offset-1">
                  <AddDeviceForm flux={flux}></AddDeviceForm>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </Modal>);
  }
});
module.exports = MobileDeviceModal;

i hope this will help

[mingfang]

What exactly is the solution to this problem?
The two examples above is not very clear.

[NourSammour]

@mingfang when the modal contain form with ref property i get the same error

Uncaught Error: Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. This usually means that you're trying to add a ref to a component that doesn't have an owner (that is, was not created inside of another component's `re...<omitted>...f. 

[jomargon]

I'm having the same problem and putting the input field on a separate component does not solve it since I need to pass value to the input fields. Please help.

[vjpr]

Same problem here.

[utdemir]

Same problem here with react: 0.13.3.

[jmwyrwas]

Since a few people (@mingfang) asked for a simpler, complete example, I figured I'd help (albeit the workaround definitely adds extra code):

var MyApp = React.createClass({
  showDialog: function() {
    this.refs.dialog.showDialog();
  },

  render: function() {
    return (
        <div>
            <Dialog ref='dialog' neededProp='default value'>
            <Button onClick={this.showDialog}>Show Dialog</Button>
        </div>
    );
  }
});

var Dialog = React.createClass({
  mixins: [OverlayMixin],

  getInitialState: function() {
    return {
      isModalOpen: false
    }
  },

  showDialog: function() {
    this.setState({
      isModalOpen: true
    });
  },

  handleOk: function() {
    this.setState({
      isModalOpen: false
    });
  },

  handleCancel: function() {
    this.setState({
      isModalOpen: false
    });
  },

  render: function() {
    return <span/>
  },

  renderOverlay: function() {
    if (!this.state.isModalOpen) {
      return <span/>
    }

    return <MyModal handleCancel={this.handleCancel} handleOk={this.handleOk} neededProp={this.props.neededProp}/>
  }
});


var MyModal = React.createClass({
  handleOk: function() {
      this.saveInputValue();
      this.props.handleOk();
  },

  saveInputValue: function() {
      // Do what you need with this.refs.input
  },

  handleCancel: function() {
      this.props.handleCancel();
  },

  render: function() {
    return (
        <Modal title='Title of Dialog' onRequestHide={this.handleCancel} closeButton={false}>
          <div className='modal-body'>
           <Input type="text" ref="input" defaultValue={this.props.neededProp}/>
          </div>
          <div className='modal-footer'>
            <Button onClick={this.handleOk}>OK</Button>
            <Button onClick={this.handleCancel}>Cancel</Button>
          </div>
        </Modal>
    )
  }
});

[sahat]

Same issue here with react and react-dom 0.14. Works if I use React.render (although that throws a deprecation error), but does not work with ReactDOM.render.

[sahat]

Figured out the issue. Browserify was only bundling react package.. I had to include react-dom to bundle.js as well.