阅读表格输入？

Question

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 ...

Answer 1

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.