Как использовать компонент Button PrimeReact? - PullRequest
Новая
       16

Как использовать компонент Button PrimeReact?

0 голосов
/ 20 января 2020

Я пытаюсь использовать метод карты javascript при создании простого калькулятора.

Я использую список для каждой строки калькулятора и сопоставляю его с ячейкой таблицы и кнопкой простого реагирования внутри нее. ,

Я получаю странные результаты в браузере.

Мой код в компоненте ниже, и я сделал скриншот вывода. введите описание изображения здесь 

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;

1 Ответ

2 голосов
/ 20 января 2020

Возможно, проблема связана с компонентом <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;

Надеюсь, это поможет

...