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

Question

我有一个用 React 编写的 web 应用程序。我有一个映射（！）组件，它代表一个状态数组。这是映射的子组件：

<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

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

Answer 2

我会这样做的方式是传递一个函数来处理更新：

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

_{小免责声明：我反应有点久了，可能有点不对劲。}