javascript - 如何使用 PrimeReact 的 Button 组件?
问题描述
我在构建一个简单的计算器时尝试了 javascript map 方法。
我为计算器的每一行使用一个列表,并将其映射到一个表格单元格和其中的一个主要反应按钮。
然而,我在浏览器中得到了奇怪的结果。
我在组件中的代码如下,我截取了输出。在此处输入图像描述
import React, { Component } from 'react'
import {Button} from 'primereact/button'
class Calculator extends Component {
constructor(props) {
super(props);
this.state = {
}
}
render() {
const values1 = ["7", "8", "9", "/"]
const values2 = ["4", "5", "6", "x"]
const values3 = ["1", "2", "3", "-"]
const values4 = ["0", ".", "+", "="]
const valuesList1 = values1.map(value => <td><Button>{value}</Button></td>)
const valuesList2 = values2.map(value => <td><Button>{value}</Button></td>)
const valuesList3 = values3.map(value => <td><Button>{value}</Button></td>)
const valuesList4 = values4.map(value => <td><Button>{value}</Button></td>)
return (
<div className="Middle">
<section className="InputContainer">
<table className="Keys">
<tbody>
<tr>
{valuesList1}
</tr>
<tr>
{valuesList2}
</tr>
<tr>
{valuesList3}
</tr>
<tr>
{valuesList4}
</tr>
</tbody>
</table>
</section>
</div>
);
}
}
export default Calculator;
解决方案
似乎问题可能来自<Button/>
组件,因为它呈现了似乎在其中的附加文本className
。
我看到您正在为按钮使用 PrimeReact 库,根据他们的文档label
,您应该通过道具输入按钮的文本。
尝试将您的代码更改为以下内容:
import React, { Component } from 'react'
import {Button} from 'primereact/button'
class Calculator extends Component {
constructor(props) {
super(props);
this.state = {
}
}
render() {
const values1 = ["7", "8", "9", "/"]
const values2 = ["4", "5", "6", "x"]
const values3 = ["1", "2", "3", "-"]
const values4 = ["0", ".", "+", "="]
const valuesList1 = values1.map(value => <td><Button label={value} /></td>)
const valuesList2 = values2.map(value => <td><Button label={value} /></td>)
const valuesList3 = values3.map(value => <td><Button label={value} /></td>)
const valuesList4 = values4.map(value => <td><Button label={value} /></td>)
return (
<div className="Middle">
<section className="InputContainer">
<table className="Keys">
<tbody>
<tr>
{valuesList1}
</tr>
<tr>
{valuesList2}
</tr>
<tr>
{valuesList3}
</tr>
<tr>
{valuesList4}
</tr>
</tbody>
</table>
</section>
</div>
);
}
}
export default Calculator;
希望这可以帮助
推荐阅读
- pip - ModuleNotFoundError:没有名为“talib”的模块
- javascript - 如何创建一个程序来计算在 1 到 100 之间可被 3 和 4 整除的数字的计数?
- reactjs - 如何在反应钩子中的渲染器内添加错误/验证消息
- flutter - Flutter 2 - 如何在新的 TextButton 中制作圆角并赋予它一个高度
- django - 如何处理 Django 表单中的编辑冲突?
- asp.net-core - .NET Core - nwebsec - csp - 多个网址?
- reactjs - 使用 react-redux / redux-watch 在 React 应用程序中访问状态时出现问题
- amazon-web-services - 在 AWS 上访问 ElasticSearch API
- python - 调用 defaultdict(set) 有什么作用?
- python - python Discord BOT 中的 Pillow 库无法识别 .paste 和 .save 函数