I just started using React.js, and I'm just not sure whether there is a special way to get the value of a textbox, returned in a component like this:
var LoginUsername = React.createClass({ render: function () { return ( <input type="text" autofocus="autofocus" onChange={this.handleChange} /> ) }, handleChange: function (evt) { this.setState({ value: evt.target.value.substr(0, 100) }); } });
To get the value of an input field in React:Use event. target. value to get the input field's value and update the state variable.
To get input values on form submit in React:Store the values of the input fields in state variables. Set the onSubmit prop on the form element. Access the values of the input fields in your handleSubmit function.
Controlled Components to Get Dropdown Menu Value in React First, we must set up an event listener on the <select> element and define an event handler. In our example, it takes one argument - e (short for event) and calls the setFruit() function. To set the state with the selected value, we access the e. target.
As described in documentation You need to use controlled input. To make an input - controlled you need to specify two props on it
onChange
- function that would set component state
to an input value
every time input is changedvalue
- input value from the component state
(this.state.value
in example)Example:
getInitialState: function() { return {value: 'Hello!'}; }, handleChange: function(event) { this.setState({value: event.target.value}); }, render: function() { return ( <input type="text" value={this.state.value} onChange={this.handleChange} /> ); }
More specifically about textarea - here
just update your input to the value
var LoginUsername = React.createClass({ getInitialState:function(){ return { textVal:'' } }, render: function () { return ( <input type="text" value={this.state.textVal} autofocus="autofocus" onChange={this.handleChange} /> ) }, handleChange: function (evt) { this.setState({ textVal: evt.target.value.substr(0, 100) }); } });
Your text input value is always in the state and you can get the same by this.state.textVal
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With