Question

我有一个这样的表单组件：

import React from 'react';

class CommentBox extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: ''
    }

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

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <fieldset>
          <legend>message</legend>
          <label htmlFor="comment-box">content：</label>
          <input
            type="text"
            id="comment-box"
            placeholder="please enter the message"
            onChange={(event) => { this.handleChange(event); }}
            value={this.state.value}
          />
        </fieldset>
        <button type="submit" style={{ marginTop: 10 }}>
          submit
        </button>
      </form>
    )
  }

  handleChange(event) {
    this.setState({
      value: event.target.value
    })
  }

  handleSubmit(event) {
    console.log(this.state.value);
    event.preventDefault();
  }
}

export default CommentBox;

对于输入元素，我使用箭头函数绑定了onChange事件，并传递了event参数，因此我可以在event函数中获取handleChange。并且，如果我使用bind方法将this绑定到constructor中，我发现我不需要传递event参数，可以在handleChange也起作用。我想知道为什么在使用event方法时不需要显式传递bind参数吗？
使用bind方法进行绑定时，代码类似于：

import React from 'react';

class CommentBox extends React.Component {
  constructor(props) {
    ...

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

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        ...
          <input
            type="text"
            id="comment-box"
            placeholder="please enter the message"
            onChange={this.handleChange}
            value={this.state.value}
          />
        ...
      </form>
    )
  }

  handleChange(event) {
    this.setState({
      value: event.target.value
    })
  }

  ...
}

export default CommentBox;

PS：我忽略了与以前相同的代码。

还有另一个问题。
我在handleChange方法中记录了一些值。

  handleChange(event) {
    console.log('event', event);
    console.log('event.target', event.target);
    console.log('event.target.value', event.target.value);

    this.setState({
      value: event.target.value
    })
  }

但是结果让我感到困惑。
第一个日志结果显示target的{{1}}的值为event，但是第二个和第三个日志结果是它们都具有正确的值。所以我想知道这是否是因为null定义了React的{{1}}方法吗？
PS：对不起，实际上我想显示结果的图片，但是我发现我没有10个声誉。

这是我第一次在stackoverflow中提出问题，感谢您提供任何有用的答复，谢谢！

Answer 1

您的问题的答案是，全局事件管理器在执行事件队列中的回调时会传递事件对象。

Event是事件回调函数的第一个参数，因此无论您是否绑定函数，都将以onChange作为第一个参数来调用已注册的event。如果仅将引用传递给函数，则仍将与事件对象一起调用该引用。问题在于您的函数在执行时不会与this具有相同的this.setState。

您的控制台/调试代码出了点问题，因为这两种情况都应记录事件对象。

绑定意味着调用上下文this将是您绑定到的上下文。箭头功能也绑定上下文。差不多-onChange将该功能添加到了处理程序队列中，但是窗口范围（或所有调用它们的范围）与您的类实例的上下文不同。

在处理程序中，如果您使用this.setState，则该功能不属于window或任何React事件队列管理器。

您还必须绑定data-which-field之类的特定参数，或者每次onChange={event => this.handleChange(event, whichField)}都重新分配该功能

替代方法是handleChange = event => {而不是handleChange(event){，默认情况下，this不会绑定{{1}}

React表单元素如何获取事件参数

1 个答案: