I created a demo where textfield value can be get by button click. Component will render everytime when setState calls. Hope it can help you!
<!-- begin snippet: js hide: false console: true babel: true -->
<!-- language: lang-js -->
class App extends React.Component{
state ={ inputValue:"" };
render(){
return(
<div>
<input type="text" value={this.state.inputValue} onChange={this.handleChange} />
<button onClick={this.handleSubmit}>Submit</button>
</div>
);
}
handleChange=(e)=>{
this.setState({ inputValue: e.target.value });
}
handleSubmit=()=>{
console.log("inputValue::", this.state.inputValue);
}
}
ReactDOM.render(<App/>, document.getElementById("root"));
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
<!-- end snippet -->
Try passing `updateInputValue` with `setState` to specific `Input` child, then call in updating:
<!-- begin snippet: js hide: false console: true babel: true -->
<!-- language: lang-js -->
class App extends React.Component {
constructor(props) {
super(props)
this.state = {
input1: null,
input2: null,
input3: null,
input4: null
}
}
updateInputValue(target, val) {
this.setState({[target]: val})
}
render() {
return (
<div className="hello">
<Input name="input1" updateInputValue={this.updateInputValue.bind(this)}
placeholder="Title 1" />
<br/>
<Input name="input2" updateInputValue={this.updateInputValue.bind(this)} placeholder="Title 2" />
<br/>
<Input name="input3" updateInputValue={this.updateInputValue.bind(this)} placeholder="Title 3" />
<br/>
<Input name="input4" updateInputValue={this.updateInputValue.bind(this)} placeholder="Title 4" />
<br/>
<button>Get value</button>
<div>{this.state.input1}</div>
<div>{this.state.input2}</div>
<div>{this.state.input3}</div>
<div>{this.state.input4}</div>
</div>
)
}
}
class Input extends React.Component {
constructor(props) {
super(props)
this.state = {
inputvalue: ''
}
}
handleChange(e) {
this.setState({
inputvalue: e.target.value
})
this.props.updateInputValue(this.props.name, e.target.value);
}
render() {
return (
<input
type="text"
placeholder={this.props.placeholder}
value={this.state.inputvalue}
onChange={this.handleChange.bind(this)}
/>
)
}
}
ReactDOM.render(<App />, document.querySelector("#app"))
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>
<!-- end snippet -->
