React：如何监听子组件事件 [英] React: How to listen to child component events

问题描述

我有一个组件，假设它包含一个表单。该表单具有子组件，它们本质上是用于输出文本输入和选择菜单的UI小部件。

I have a component, let's say it contains a form. The form has child components which are essentially UI widgets for outputting text inputs and select menus.

选择菜单组件有点花哨，并使用onChange事件进行一些状态维护。

The select menu components are a bit fancy and do some state maintaining using the onChange event.

我的问题是;如何从父（表单）组件挂钩到选择菜单的onChange事件？我无法通过道具传递更改，因为我已经在select组件中指定了onChange并且我不想覆盖它。

My question is; how do I hook into the onChange event for a select menu from the parent (form) component? I can't pass onChange through props as I already have onChange specified inside the select component and I don't want to override it.

示例：

var Form = React.createClass({

    handleSelectChange: function(){
        // Do something when <Select /> changes
    },

    render: function () {    

        var selectMenuOptions = [
            {label: 'Choose...', value: ''},
            {label: 'First option', value: 'one'},
            {label: 'Second option', value: 'two'}
        ];
        return (
            <form>
                <Select name="selectMenu" id="selectMenu" options={selectMenuOptions} />
            </form>
          );
        }
});

var Select = React.createClass({

    getDefaultProps: function() {
        return {
          options: [],
          className: "select"
        };
      },

    getInitialState: function () {
        return {
            buttonText: 'Loading...',
            defaultValue: null 
        };
    },

    handleChange: function (e) {
        // Update buttonText state
    },

    render: function () {

        return (
            <div className={this.props.className}>
                <div className="select__button">{this.state.buttonText}</div>
                <select className="select__selector" 
                        ref="select" 
                        onChange={this.handleChange}>
                        {this.props.options.map(function(option, i){
                            return (<Option option={option} key={i} />);
                        })}
                </select>
            </div>
        );
    }
});

推荐答案

使用<选择onChange = {...} /> 不会覆盖< select onChange = {...} /> 里面的选择渲染方法。 < Select /> 组件及其呈现的< select /> 组件具有完全不同的组合道具。

Using <Select onChange={...} /> won't override the <select onChange={...} /> inside Select's render method. The <Select/> component and the <select/> component it renders have completely different sets of props.

我认为，做你想做的最简单的方法就是让你的选择 handleChange 方法调用 this.props.onChange 。你可以传递相同的 e 参数 handleChange 收到：

The simplest way to do what you want, I think, is to have your Select's handleChange method call this.props.onChange. You can just pass it the same e argument handleChange receives:

var Form = React.createClass({
  handleSelectChange: function(){
    // Do something when <Select /> changes
  },

  render: function () {
    // ...
    return (
      <form>
        <Select name="selectMenu"
          id="selectMenu"
          options={selectMenuOptions}
          onChange={this.handleSelectChange} />
      </form>
      );
    }
});

var Select = React.createClass({
  // ...

  handleChange: function (e) {
    if (this.props.onChange) {
      this.props.onChange(e);
    }
    // Update buttonText state
  },

  render: function () {
    return (
      <div className={this.props.className}>
        <div className="select__button">{this.state.buttonText}</div>
        <select className="select__selector"
          ref="select"
          onChange={this.handleChange}>
          {this.props.options.map(function(option, i){
            return (<Option option={option} key={i} />);
          })}
        </select>
      </div>
    );
  }
});

这篇关于React：如何监听子组件事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！