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()方法，该怎么做？

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' ) );

Answer 2

开发人员需要创建一个事件处理程序并将其作为prop传递给。你把这个道具称为改变。

的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)} />

Answer 3

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

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>
    );      
}

}

并且用户将在其组件中使用Select组件，如下所示：

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

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

3 个答案: