React组件事件处理程序 - 无法访问事件

时间:2016-06-09 05:45:25

标签: javascript mongodb meteor reactjs event-handling

这是一个基本的JavaScript问题,但仍然发送了一段时间谷歌搜索。基于this article,以下代码应该有效,但event.target is not a function中出现saveBubble错误。当我在调试器中尝试event时,错误显示为Uncaught: illegal accessarguments数组包含所需的事件,但为什么在我调用event时它不起作用?

export default class Bubble extends Component {
  saveBubble(event) {
    Bubbles.insert({
      text: event.target.attr('value') // <- throws an error here
    })
  }

  body() {
    const { text } = this.props.bubble;

    if (text) {
      return text;
    }
    else {
      return (
        <input type='text' onBlur={ this.saveBubble.bind(this) }/>
      )
    }
  }

  render() {
    return (
      <div className='bubble-wrapper'>
        <div className='body'>
          { this.body() }
        </div>
      </div>
    );
  }
}

1 个答案:

答案 0 :(得分:4)

我想你可能想要event.target.value而不是event.target.attr('value')。这将为您提供输入元素中的当前值,如react docs中所述。

我的猜测是你实际上将event.target.attr is not a function作为错误消息,因为dom元素(如event.target)没有这个方法,比如说jquery对象会

为了增加一点清晰度,我相信这应该适合你:

saveBubble(event) {
  Bubbles.insert({
    text: event.target.value
  })
}