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 -->
<!-- begin snippet: js hide: false console: true babel: true -->
<!-- language: lang-js -->
class App extends React.Component {
constructor() {
super();
this.state = {value : ''}
}
handleChange = (e) =>{
this.setState({value: e.target.value});
}
render() {
return (
<div>
<input type="text" value={this.state.value} onChange={this.handleChange}/>
<div>{this.state.value}</div>
</div>
)
}
}
ReactDOM.render(<App/>, document.getElementById('app'));
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<div id="app"></div>
<!-- end snippet -->
