ofgogipreghaoegeo

import React, { Component } from "react";

class AutoComplete extends Component {

	constructor(props) {
		super(props)
		this.state = {
			query: ""
		}
	}

	_handleChange({target: {value}}) {
		this.setState({
			query: value
		})
		// Do api-call etc...
	}

	_getData = () => this.state.query

	render() {
		return <input 
			name="query"
			placeholder="Autocomplete search..."
			onChange={(e) => this._handleChange(e)}
			value={this.state.query}
		/>
	}
	
}

class AnotherInput extends Component {

	constructor(props) {
		super(props)
		this.state = {
			query: ""
		}
	}

	_handleChange({target: {value}}) {
		this.setState({
			query: value
		})
		// Do api-call etc...
	}

	_getData = () => this.state.query

	render() {
		return <input 
			name="query" 
			placeholder="Elasticsearch query..."
			onChange={(e) => this._handleChange(e)}
			value={this.state.query}
		/>
	}

}

class Form extends Component {

	_getData() {
		const children = ["autocomplete", "anotherinput"];
		const data = [];

		for (let child of children) {
			let obj = {
				value: this[child]._getData();
			}
			data[child] = obj;
		}

		console.log(data);
	}

	render() {
		return <form style={{display: "flex", flexFlow: "column"}}>
			<AutoComplete ref={e => this.autocomplete = e} />
			<AnotherInput ref={e => this.anotherinput = e} />
			<button onClick={(e) => {
				e.preventDefault();
				this._getData();
			}}>Get data</button>
		</form>
	}

}

export default Form;