0

我有一个如下的表单元素:

import React from 'react';

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

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

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <fieldset>
          <legend>留言</legend>
          <label htmlFor="comment-box">留言内容:</label>
          <input
            type="text"
            id="comment-box"
            placeholder="请输入留言内容"
            onChange={this.handleChange}
            value={this.state.value}
          />
        </fieldset>
        <button type="submit" style={{ marginTop: 10 }}>
          提交
        </button>
      </form>
    )
  }

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

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

export default CommentBox;

我想请问的是为什么我在 input 写的是 onChange={this.handleChange} ,然后在 handleChange 函数里面就可以拿到 event 这个参数了,而如果我在 input 使用函数调用的方式来写,就要主动传入 event 才能拿到这个参数呢?

函数调用的方式:

import React from 'react';

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

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

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <fieldset>
          <legend>留言</legend>
          <label htmlFor="comment-box">留言内容:</label>
          <input
            type="text"
            id="comment-box"
            placeholder="请输入留言内容"
            onChange={(event) => { this.handleChange(event); }} // 改成函数调用的方式,就要主动传入event参数
            value={this.state.value}
          />
        </fieldset>
        <button type="submit" style={{ marginTop: 10 }}>
          提交
        </button>
      </form>
    )
  }

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

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

export default CommentBox;

除此之外还有一点我觉得不理解的。
我在 handleChange 函数里面 log 了一些值。结果让我觉得很奇怪……

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

结果:
图片描述

图片描述

就是我输出 event,从控制台看到 eventtargetnull 的,
但是后面直接输出 event.targetevent.target.value 都是有值的,是因为 React 处理了 event targetgetter 方法么?

希望大家不吝赐教,感谢!!

4月22日提问
2 个回答
0

第一个问题相当于你重新定义了一个新函数,然后在新函数中调用了this.handleChange函数。默认事件对象只传入了新函数,所以你需要显示传入参数。

0

我在 stackoverflow 也提了个问题,大致解决了我的疑惑。

其实是两种方法都拿到了 event 参数的,像 @小皮筋 说的,用箭头函数的时候是我重新定义了一个函数,然后在里面调用了 this.handleChange 方法。
onChange={(event) => { this.handleChange(event); }} 这个写法里的 event 就是事件传递过来的,跟用 bind 方法获得的 event 是一样的。而这个 eventReact 进行了封装的。见官方文档:https://zh-hans.reactjs.org/d...

stackoverflow 问题链接:https://stackoverflow.com/que...

撰写答案

推广链接