时间戳

首页 > 解决方案 > 如何在没有 document.getElementById('..') 的情况下获取输入（文本）字段的值

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

问题描述

我有一个用 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>

标签： javascriptreactjsinputparameters

解决方案

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

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

小免责声明：自从我反应以来已经有点过了，可能有点偏离。

推荐阅读