Question

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

<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

我要这样做的方法是，还传递一个函数来处理更新：

<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>
  );
 }
 }

Answer 3

您可以将这些输入绑定到chiled组件中的变量，然后将它们传递给父级。

<li>Benutzername: 
<input 
  id='inputBenutzername' 
  type="text" 
  defaultValue={this.props.benutzername} 
  value={tmp}
  onChange={(e)=>{ tmp = e.target.value }}
/>
</li>

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

3 个答案: