React常用按钮组件示例 react sidebar

按钮是Web应用开发过程中最常见的元素之一。按钮组件实际上基于两种标签实现：<A>标签和<button>标签，用户可以自行决定使用哪类标签，默认使用<button>标签。为保持页面风格一致，开发人员一般需要预先定义适用于各种场景的按钮的样式类，如在Bootstrap中定义的btn-default、btn-success、btn-danger、btn-warning等分别用于默认、操作成功、危险操作、警告的场景中。在用React实现按钮组件时，可以从样式和事件两个方面考虑。样式应该允许使用者自行定义，并作为属性传入组件，若用户不使用该属性，组件需要提供默认样式。一般情况下，按钮仅响应鼠标单击事件，用户可将自定义的事件处理函数作为属性传入组件，事件触发时，该函数会被调用。

在本示例中，我们构造了一个按钮组件ButtonComponent，该组件将返回一个Bootstrap 3中的默认按钮，并可接受用户自定义的单击事件处理方法。在组件定义时，我们使用propTypes特性对传入组件的属性进行了类型约束，限定属性clickHandler为函数类型，当传入属性不是函数类型时，JavaScript控制台将输出警告信息。请注意，在render函数中，定义按钮单击事件时，并不是简单地将clickHandler属性指定为事件处理函数，而是使用语句this.props.clickHandler.bind（this）。在这里，bind（this）会改变事件处理函数的执行环境，即将clickEventHandler（）函数中的this替换为bind（this）中的this（这里的this指向ButtonComponent）。单击按钮时，JavaScript控制台将输出当前的按钮组件对象，如果去掉bind（）函数，控制台将输出null。