如何在React中附加自定义事件处理程序？

Question

我在React中创建了一个SelectBox组件，希望其他开发人员能够重复使用。每次重用该组件时，SelectBox将具有相同的选项，但我希望开发人员在onChange事件上拥有自己的自定义事件处理程序。

我的代码如下所示：

class SelectBox extends React.Component {
   updateOutput() {
   }

   render() {
      return (
         <div className="select-wrap">
            <select onChange={this.updateOutput}>
               <option value="one">ONE</option>
               <option value="two">TWO</option>
               <option value="three">THREE</option>
            </select>
         </div>
      );
   }
}

ReactDOM.render( <SelectBox />, document.querySelector( '#main' ) );

我希望你能以抽象类的概念实现，即类的实现取决于继承它的人。

上面的例子中，我想让开发者使用<SelectBox />并实现自己的updateOutput()方法，该如何实现呢？

- Siddharth Thevaril

---

React中不存在自定义事件（未公开），因此也没有自定义事件处理程序。建议的做法是，如下面的答案所解释的那样 - 使用props。 - Sergey Ilinsky

Answer 1

import PropTypes from 'prop-types';

 class SelectBox extends React.Component {

       render() {
          return (
             <div className="select-wrap">
                <select onChange={this.props.updateOutput}>
                   <option value="one">ONE</option>
                   <option value="two">TWO</option>
                   <option value="three">THREE</option>
                </select>
             </div>
          );
       }
    }
SelectBox .propTypes = {
  updateOutput: PropTypes.func
};

    ReactDOM.render( <SelectBox updateOutput={someFunc} />, document.querySelector( '#main' ) );

- Shiva Sai

Answer 2

像这样编写您的选择组件：

export default class Select extends React.Component {
render(){
    const { id, ...otherAttributes } = this.props;
    let selInnerStructure = this.props.dataSrc.map((element, index) => {
        return (
            <option key={index} value={element.value}>{element.displayText}</option>);
    });

    return(

        <div>
                <select className="form-control" 
                        id={id}
                        {...otherAttributes} 
                        >
                    {selInnerStructure}
                </select>
        </div>
    );      
}

}

用户将在其组件中使用以下方式的选择组件：

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: [
        {"value": "save", "displayText": "Value One"},
        {"value": "cancel", "displayText": "Value Two"}
      ]
    };
  }

  render() {
    return (
      <div>
        <Select dataSrc={this.state.name} id="selId" 
          name="selData"
          onClick={(e) => console.log("onClick")}
          onChange={(e) => console.log("onChange")}
        />
        {/* passed other attribs also */}
      </div>
    );
  }
}

通过使用这个方法，用户可以根据自己的需要调用他们自己的onClick和onChange事件。如果你像这样设置 <select onChange={this.props.updateOutput}>，那么他们倾向于仅使用onChange。如果你不需要用户添加更多事件，以下代码就足够了：<select onChange={this.props.updateOutput}>。

使用你的组件，我还添加了一些有用的选项，用户可以根据自己的需要添加其他属性。

希望这能帮到你。

演示链接：Demo

- Jayavel

Answer 3

开发者需要创建一个事件处理程序并将其作为属性传递给<。您可以使用onChange调用此属性。

onChange={this.props.onChange}

<select onChange={this.props.onChange}>
  <option value="one">ONE</option>
  <option value="two">TWO</option>
  <option value="three">THREE</option>
</select>

开发人员需要按如下方式使用：

<SelectBox onChange={this.onChange.bind(this)} />

- Ishwar Patil