如何在沒有 document.getElementById('..') 的情況下獲取輸入（文本）字段的值

Question

我有一個用 React 編寫的 web 應用程序。 我有一個 mapped(,) 組件。 它代表一個狀態數組：這是映射的子組件：

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

現在我希望在單擊按鈕時將輸入字段（input_benutzername、input_vorname...）的值傳遞給父組件。 我可以這樣做：

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

然后用那個值做一些事情。

...但正如我所說，這些組件是映射的，所以它總是傳遞第一個映射組件的值，因為它搜索具有此 id 的第一個元素（我猜）。

所以我的最后一個問題是，如何在不使用 getElementById 的情況下獲取輸入字段的值，因為這不起作用。

謝謝你的幫助

編輯：

這是父組件：

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

我會這樣做的方式是通過 function 來處理更新：

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

然后在你的表格中你有：

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

_{小免責聲明：自從我反應以來已經有點過了，可能有點偏離。}

Answer 2

輸入字段在 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>
  );
 }
 }