Myujth

How would you read the input value ?

On the reacjs site I see very complicated way !!

https://reactjs.org/docs/forms.html

I just want to read the value and submit it via ajax fetch() request. I.e. I don't need to manage bindings, events and such ...

The easiest way by far to read values from html controls is by using an event handler.

export default class myComponent extends Component 
 person = ;

 onChange = field => e => 
 this.person[field] = e.target.value;
 ;

 render() 
 return (
 <Input
 id="firstName"
 name="firstName"
 autoComplete="firstName"
 autoFocus
 onChange=this.onChange('FirstName')
 />
 );
 
 

In the above code snippet we are basically telling react to fire the onChange member on an update of firstName control update. Our method will receive an event e, that has a handle to our control and we can basically probe it's value member to get what's typed in (much like jquery's $('#element').value()).

Why is it the easiest method? because it's generic enough to allow you to handle multiple inputs in a react component. Notice that, I'm also instructing React to pass me the control name in addition to the event, and using this method I can basically know exactly which of my inputs (in case of multiple) caused the event to fire.

Reading user input value is feasible and recommended via event handlers.

Below example would explain how to read input value and send it to the backend via fetch when Form is submitted

 class Test extends Component
 constructor(props)
 super(props);
 this.state = 
 name: “”
 
 

 handleChange = event => 
 this.setState(name: event.target.value);
 

 handleSubmit = () => 
 //send the value via fetch backend I.e., this.state.name
 
 render()
 const name = this.state;
 render(
 <form onSubmit=this.handleSubmit
 <label>
 Name:
 <input type="text" value=name onChange=this.handleChange name="name" />
 </label>
 <input type="submit" value="Submit" />
 </form>
 )