JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/prop-types@15.5.10/prop-types.js"></script>
<script src="https://unpkg.com/react@16.2.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.2.0/umd/react-dom.development.js"></script>
<div id="container"></div>

Babel + JSX

const inputTypes = [
	window.HTMLInputElement,
	window.HTMLSelectElement,
	window.HTMLTextAreaElement,
];

const triggerInputChange = (node, value = '') => {
  
	// only process the change on elements we know have a value setter in their constructor
	if ( inputTypes.indexOf(node.__proto__.constructor) >-1 ) {

		const setValue = Object.getOwnPropertyDescriptor(node.__proto__, 'value').set;
		const event = new Event('input', { bubbles: true });

		setValue.call(node, value);
		node.dispatchEvent(event);

	}

};


class Input extends React.Component {
	static propTypes = {
  	value: PropTypes.string,
    onChange: PropTypes.func,
  };
  
	render() {
  	return (
      <select onChange={this.props.onChange}>
        <option value="Banana">Banana</option>
        <option value="Super">Super</option>
        <option value="Test">Test</option>
      </select>
    );
  }
}

class App extends React.Component {
	static propTypes = {
  	name: PropTypes.string,
  };
  
  constructor() {
  	super()
    this.state = {
    	value: "Banana",
    };
  }
  
  handleChange = (e) => {
  	this.setState({
    	value: e.target.value,
    });
    alert('Change');
  }
  
  bindInput = (node) => {
  	this.inputNode = node;
  }
  
  triggerChange = () => {
  	triggerInputChange(ReactDOM.findDOMNode(this.inputNode), "Test")
  }
  
  render() {
  	const {value} = this.state;
  	return (
    	<div>
    	  <Input ref={this.bindInput} onChange={this.handleChange} value={value} />
        <button onClick={this.triggerChange}> Trigger value change </button>
    	</div>
    );
  }
}

ReactDOM.render(<App name="world"/>, document.getElementById('container'));