Question

我有一个React表单，它有一个type='submit'的 submit 按钮，另一个是type='button'的 delete 按钮。我的问题是无法在删除按钮的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属性，它将为我提供按钮的值。

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

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

Answer 2

因为它们是兄弟元素，所以按钮无法通过event.target获得其兄弟姐妹。如果要更改值。我建议将绑定状态设置为您的输入值，然后如果要删除，请将setState输入值设置为''。

Answer 3

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

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

constructor(props) {
   super(props);

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

或者您也可以像这样进行绑定：

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

请阅读以下内容，它非常清楚且写得很好，因为这是一个常见问题： React docs

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

3 个答案: