Event.target возвращает неопределенное значение в кнопке типа React

Question

У меня есть форма React, в которой одна кнопка submit имеет значение type='submit', а другая - delete button type='button'.Моя проблема в том, что я не могу получить event.target, который я хочу, в функции onClick кнопки удаления.

handleSubmit = (event) => {
  event.target.testing.value    // This will work
}

handleDelete = (event) => {     
  event.target.testing.value    // This doesn't work, returns undefined
}

render(){
  return(
    <form onSubmit={this.handleSubmit}>
       <input id='testing' value='anything' />

       <button type='submit'/>
       <button type='button' onClick={this.handleDelete} />
    </form>
  )
}

Я понимаю, что в функции handleDelete параметр события является событием кнопки, поэтому, если я сделаю event.target.value, он даст мне значение кнопки, если кнопка имеет значениеимущество.

Есть ли способ, чтобы я мог получить доступ к значению input в функции handleDelete?

Answer 1

Прежде чем двигаться вперед, вы должны прочитать this .

Затем исправьте свой код (если вы используете поля класса , если нет, следуйте примерупо ссылке выше) ...

class Example extends React.Component {
  state = { value: "" };

  handleClear = (event) => { 
    // assuming you want to clear the input     
    // you won't need the event if you utilize state
    this.setState({ value: "" });
  }

  handleChange = (event) => {
    const { value } = event.target; // same as "value = event.target.value"

    this.setState({ value });
  }

  handleSubmit = (event) => {
    event.preventDefault(); // prevents the page from freshing when "submit" is clicked
    alert(this.state.value);
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label htmlFor="testInput">Input: </label>
        <input id="testInput" type="text" value={this.state.value} onChange={this.handleChange} />
        <button type="button" onClick={this.handleClear}>Clear</button>
        <button type="submit">Submit</button>
      </form>
    );
  }
}

ReactDOM.render(<Example />, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 2

Поскольку они являются братскими элементами, Баттон не может получить своих братьев и сестер по event.target.Если вы хотите изменить значение.Я рекомендую привязать состояние к вашему входному значению, а затем, если вы хотите удалить, установите входное значение для ''.

Answer 3

Это потому, что вам нужно привязать ссылку к this к обработчику событий

Вам нужно либо выполнить привязку в конструкторе следующим образом:

constructor(props) {
   super(props);

   this.handleSubmit = this.handleSubmit.bind(this);
}

Или вытакже можно выполнить привязку следующим образом:

<button type='button' onClick={this.handleDelete.bind(this} />

Прочитайте это, это очень ясно и хорошо написано, так как это обычный вопрос: React docs