Как получить значение поля ввода (текста) без document.getElementById ('..') - PullRequest
Новая
       73

Как получить значение поля ввода (текста) без document.getElementById ('..')

0 голосов
/ 20 апреля 2020

У меня есть веб-приложение, написанное на React. У меня есть сопоставленный (!) Компонент, который представляет массив состояний. Это сопоставленный дочерний компонент: 

<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

, а затем сделать что-то с этим значением.

... но, как я уже сказал, эти компоненты сопоставлены, поэтому он всегда передает значение первый сопоставленный компонент, потому что он ищет первый элемент с этим идентификатором (я думаю).

Итак, мой последний вопрос: как я могу получить значение полей ввода без использования 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>

Ответы [ 3 ]

0 голосов
/ 20 апреля 2020

Поле ввода кодируется таким образом в 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>
  );
 }
 }
0 голосов
/ 20 апреля 2020

Вы можете использовать привязку этих входных данных к переменным в охлажденном компоненте, а затем передать их родительскому элементу. 

<li>Benutzername: 
<input 
  id='inputBenutzername' 
  type="text" 
  defaultValue={this.props.benutzername} 
  value={tmp}
  onChange={(e)=>{ tmp = e.target.value }}
/>
</li>
0 голосов
/ 20 апреля 2020

Я бы так и сделал, передав функцию для обновления: 

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

Небольшой отказ от ответственности: это было немного с тех пор, как я отреагировал, это может быть немного не так.

...