如何在没有 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>

_{小免责声明：我已经有点反应了，可能有点偏离了。}