RSJF Remote Submit Form

Trigger form submission from external component, using refs.

by spacebaboon

HTML

<script src="https://npmcdn.com/react-jsonschema-form@0.45.0/dist/react-jsonschema-form.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container">
  <div id="main"></div>
</div>

CSS

.component-container {
  padding: 20px;
  border: 1px solid #ccc;
}

.component-container + .component-container {
  margin-top: 20px;
}

.hidden {
  display: none;
}

Babel + JSX

const RJSForm = JSONSchemaForm.default;

const schema = {
  "type": "object",
  "properties": {
    "firstname": {
      "title": "First Name",
      "type": "string"
    },
    "surname": {
      "title": "Surname",
      "type": "string"
    }
  }
};


class MyForm extends React.Component {

	constructor(props) {
  	super(props);
  }

	onSubmit() {
  	alert('submitted!');
  }
  
	render () {
  	return (
  	<RJSForm schema={schema} onSubmit={this.onSubmit} className="component-container">
      <button ref={(btn) => {this.submitButton=btn;}} className="hidden"/>  
    </RJSForm> 
    );
  }
} 


class ControlPanel extends React.Component {

	constructor(props) {
  	super(props);
  }

	render() {
  return (
  	<div className="component-container">
      <button onClick={this.props.submitMe}>Submit the form</button>
    </div> 
    );
  }
}


class Container extends React.Component {

	constructor(props) {
  	super(props);
    this.submitForm = this.submitForm.bind(this);
  }

	submitForm() {
  	this.form.submitButton.click();
  }

  render() {
  return (
    <div>
      <MyForm ref={(form) => {this.form=form;}}/>
      <ControlPanel submitMe={this.submitForm}/>
    </div>
    );
  }
};


React.render( <Container /> ,
  document.getElementById("main")
);