将自定义 React.js 组件包装为 HTML 按钮
介绍
React.js 允许开发人员通过围绕 HTML 输入元素创建组件来扩展其默认功能。这为输入元素提供了更多自定义功能、行为，甚至是可以自行维护的值。在本指南中，我们将介绍如何为 HTML 按钮创建自定义组件并扩展其功能，而不仅仅是为其onClick属性附加事件处理程序。
设置
假设您要创建一个执行以下操作的按钮：
- 如果不可点击则将颜色更改为红色
- 如果可点击则将颜色更改为绿色
- 如果按钮不可点击，则将按钮文本更改为“正在加载...”
如果手动完成，这会非常繁琐。您可能有几个 JavaScript 例程会修改其行为，或者几个 CSS 文件可能会根据 JavaScript 添加或删除的类来更改其外观。如果您针对单个按钮执行此操作，这一切都很好。但是，如果您扩展到由后端进程生成的按钮数组之类的东西，则维护起来会变得很混乱。
为了解决这个问题，创建一个代表该按钮的组件，您可以将其称为MyCustomButton：
import React from 'react';
export default class MyCustomButton extends React.Component {
constructor(props) {
this.state = {
text: "Click Me"
}
}
render() {
return (
<button>
{this.state.text}
</button>
);
}
}
这里没什么特别的。首先创建一个组件，该组件在其状态下维护一个文本值并呈现实际的 HTML 按钮。文本的值将成为按钮的实际文本，由this.state.text调用。
将颜色改为红色或绿色
接下来，你需要通过将其背景颜色更改为红色（如果不可点击）来指示按钮是否可点击。这意味着按钮的禁用状态设置为true。在 React.js 中解决此类问题时，请始终记住让组件管理所有内容，并仅让值通过props触发该组件的属性，该 props 最初传递给构造函数。你可以假设props可以有一个名为disabled 的属性，该属性可以由调用此MyCustomButton组件的外部组件选择性地传递。但是，由于它是可选的，因此你需要为它设置一个默认值。为此，创建一个名为disabled 的临时变量，该变量从render()中访问this.props.disabled：
var disabled = this.props.disabled || false;
||表示如果this.props.disabled为空，则其初始值为false 。将该值与HTML 按钮的实际disabled属性挂钩：
<button disabled={disabled}>
{this.state.text}
</button>
接下来，您可以通过将对象传递给按钮的style属性来设置按钮的样式。就像disabled一样，您可以临时声明另一个变量来将对象的backgroundColor属性更改为red：
var style = { backgroundColor: 'red' };
但是，如果disabled为false，则backgroundColor应该是绿色：
if(disabled == false) {
style = { backgroundColor: 'green' }
}
将变量style挂接到渲染的HTML按钮的属性style上：
<button disabled={disabled} style={style}>
{this.state.text}
</button>
处理文本
要将按钮的文本更改为“正在加载...”，可以使用与上一节相同的技术。创建一个临时变量文本，并根据disabled的值将其设置为“正在加载...” ：
var text = this.state.text;
if(disabled) {
text = "Loading...";
}
将原始渲染的this.state.text替换为jsx中的文本。渲染后的按钮现在应如下所示：
<button disabled={disabled} style={style}>
{text}
</button>
总体代码
您的整体代码现在应如下所示：
import React from 'react';
export default class MyCustomButton extends React.Component {
constructor(props) {
this.state = {
text: "Click Me"
}
}
render() {
var style = { backgroundColor: 'red' };
if(disabled == false) {
style = { backgroundColor: 'green' }
}
var text = this.state.text;
if(disabled) {
text = "Loading...";
}
return (
<button disabled={disabled} style={style}>
{text}
</button>
);
}
}
结论
您无需使用普通的 HTML 按钮并通过外部代码维护各种行为，而是可以创建一个自定义 React.js 组件作为该元素的包装器，并添加附加功能。如果您想要共享由应用自身逻辑呈现的动态生成的 UI 组件集的常见行为，这将特别有用。使用 React.js 将值传递给props，您可以相应地控制自定义组件的行为，甚至可以为其设置默认值，以免给外部代码增加输入初始值的负担。
作为一个额外的步骤，如果外部组件无法传递名为buttonText的props属性的值，请尝试查看是否可以将“单击我”文本设为默认值（提示：在这种情况下， state是存储文本的好地方吗，还是只需使用props就可以了）？
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
扫一扫，分享到微信
