如何在没有 document.getElementById('..') 的情况下获取输入（文本）字段的值

Question

I have an webapplication, written in React. I have a mapped(,) component. which represents an array of states: This is the mapped child component:

<div className="summarized_content_div">
                    <ul>
                        <li>Benutzername: <input id='inputBenutzername' type="text" defaultValue={this.props.benutzername}/></li>
                        <li>Vorname: <input id='input_vorname' type="text" defaultValue={this.props.vorname}/></li>
                        <li>Nachname: <input id='input_nachname' type="text" defaultValue={this.props.nachname}/></li>
                        <li>E-Mail: <input id='input_email' type="text" defaultValue={this.props.email}/></li>
                        <li>Letzter Login: <input id='input_letzter_login' type="text" defaultValue={this.props.letzter_login}/></li>
                        <li>Status: <input id='input_status' type="text" defaultValue={this.props.status}/></li>
                        <input id="speichern" className="button" type="button" value="Speichern"/><input id="löschen" className="button" type="button" value="Löschen"/>
                    </ul>
                </div>

Now I want the value of the input fields (input_benutzername, input_vorname,...) to be passed to the parent component on a button click. I could to something like:

const value = document.getElementById('whatever').value

and then do something with that value.

...but as i said, those components are mapped, so it always passes the value of the first mapped component, because it searches for the first element with this id (i guess).

So my final question is, how do I get the value of the input fields without using getElementById, because this is not working.

Thanks for you help

EDIT:

This is the parent component:

doSomethingWithTheValues = (values) => {
...
}


...
<Route path="/verwaltung/benutzer">
                            <div>
                                {this.props.benutzer.map((benutzer, index) => {
                                    return <BenutzerItem
                                        index={index}
                                        key={benutzer.id}
                                        id={benutzer.id}
                                        benutzername={benutzer.benutzername}
                                        vorname={benutzer.vorname}
                                        nachname={benutzer.nachname}
                                        email={benutzer.email}
                                        letzter_login={benutzer.letzter_login}
                                        status={benutzer.status}
                                    />
                                })}
                            </div>
                        </Route>

Answer 1

The way I would do it, is by also passing a function to handle the update:

<ExampleForm 
    data={this.state.valuesForExampleForm}
    update={(key,newValue) => this.setState({key, newValue})}
    />

And then in your form you have:

const data = this.props.data;
// other code
<li>Benutzername: <input defaultValue={data.benutzername} onChange={(e)=>this.props.update('benutzername', e.target.value)}/></li>

_{Small disclaimer: It's been a bit since I Reacted, it might be a little off.}

Answer 2

Input field is coded in this way in React.js:

 class Componentname extends React.Component {
 constructor(props) {
 super(props);
 this.state = {value: ''};

 this.handleChange = this.handleChange.bind(this);
 this.handleSubmit = this.handleSubmit.bind(this);
 }

 handleChange(event) {
 this.setState({value: event.target.value});
 }

 handleSubmit(event) {
 alert('A name was submitted: ' + this.state.value);
 event.preventDefault();
 }

 render() {
  return (
   <form onSubmit={this.handleSubmit}>
     <label>
      Name:
      <input type="text" value={this.state.value} onChange={this.handleChange} 
     />
    </label>
    <input type="submit" value="Submit" />
  </form>
  );
 }
 }