Event.target在React类型按钮中返回未定义

Question

I have a React form that has one submit button of type='submit' and another one which is a delete button of type='button' . My problem is I couldn't get the event.target that I want in the onClick function of the delete button.

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

I understand that in the handleDelete function, the event param is the event of the button so if I do event.target.value it will give me the value of the button if the button has the value property.

Is there a way so that I can access the value of the input in the handleDelete function?

Answer 1

Before moving forward, you should read this .

Then, fix your code (assuming you're using class fields , if not, follow the example in the link above)...

 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

Because they are brother elements, button cannot get his siblings by event.target. If you want to change the value. I recommand bind state to your input value, and then if you want to delete, setState input value to ''.

Answer 3

This is because you need to bind the reference to this to the event handler

You need to either do the binding in the constructor like this:

constructor(props) {
   super(props);

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

Or you could also do the binding like this:

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

Read this, it´s very clear and well written as this is a common question: React docs