Question

更改输入时，它仅打印'input changes'，但不打印'bubbles'。知道为什么吗？

const InputWrapper = React.createClass({
    change () {
        console.log('input changes')
    },
    render () {
        return (
            <input onChange={this.change}/> 
        );
    }
});

const App = React.createClass({
    change () {
        console.log('bubbles');
    },
    render () {
        return (<InputWrapper onChange={this.change} />);
    }
});

https://jsfiddle.net/stevemao/6nxvvkwy/5/

编辑：如果不this.props.change调用InputWrapper，它是否会自动冒泡？来自官方文档：与所有DOM事件一样，onChange prop支持所有本机组件，可用于监听冒泡的更改事件。

Answer 1

非常简单......当您在this.change中呼叫InputWrapper时，您永远不会拨打电话change来自App道具}}。你应该像这样修改它......

const InputWrapper = React.createClass({
  change () {
    console.log('input changes')
    this.props.onChange()
  },
  render () {
    return (
        <input onChange={this.change}/> 
    );
  }

}）;

Answer 2

对于遇到此问题的任何人，我发现的解释是：

您应该将onChange放在HTML元素（如span，div）上，以使气泡起作用。因为当您将它放在 InputWrapper 中时，它就像一个道具，并且因为您从未调用过this.props.onChange，所以它不起作用。

此代码应该有效

const InputWrapper = React.createClass({
  change () {
    console.log('input changes')
  },
  render () {
    return (
        <input onChange={this.change}/> 
    );
  }
});

const App = React.createClass({
  change () {
    console.log('bubbles');
  },
  render () {
    return (
      <span onChange={this.change}>
       <InputWrapper  />
      </span>);
  }
});

反应onChange似乎没有正确起泡

2 个答案: