Event.target 在 React 类型按钮中返回 undefined答案

【问题标题】：Event.target returns undefined in React type buttonEvent.target 在 React 类型按钮中返回 undefined
【发布时间】：2019-03-05 00:13:10
【问题描述】：

我有一个 React 表单，其中有一个 submit 按钮 type='submit' 和另一个 delete 按钮 type='button'。我的问题是我无法在删除按钮的 onClick 功能中获得我想要的event.target。

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，如果按钮具有 value 属性，它将给我按钮的值。

有没有办法让我可以在handleDelete 函数中访问input 的值？

【问题讨论】：

标签： javascript reactjs events

【解决方案1】：

在继续之前，您应该阅读this。

然后，修复您的代码（假设您使用的是class fields，如果没有，请按照上面链接中的示例进行操作）...

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>

【讨论】：

我试图以不需要状态的方式进行操作。但是，这是适合我的方式。谢谢。

【解决方案2】：

因为是兄弟元素，所以button无法通过event.target获取他的兄弟元素。如果要更改值。我建议将状态绑定到您的输入值，然后如果您想删除，请将状态输入值设置为 ''。

【讨论】：

【解决方案3】：

这是因为您需要将对 this 的引用绑定到事件处理程序

您需要像这样在构造函数中进行绑定：

constructor(props) {
   super(props);

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

或者你也可以这样绑定：

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

阅读这篇文章，它非常清晰且写得很好，因为这是一个常见问题： React docs

【讨论】：