Question

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

2016-06-09

1210

javascript mongodb meteor reactjs event-handling

这是一个基本的 JavaScript 问题，但还是让我在谷歌上搜索了一段时间。根据这篇文章，下面的代码应该可以工作，但是我在 saveBubble 中得到了 event.target is not a function 错误。当我在调试器中尝试 event 时，错误显示 Uncaught: illegal access 。 arguments 数组具有所需的事件，但是为什么当我调用 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>
    );
  }
}

Answer 1

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

我猜您实际上收到的是 event.target.attr 不是函数 错误消息，因为 dom 元素（如 event.target）没有此方法，例如 jquery 对象没有。

为了更清晰一点，我相信这应该适合您：

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