• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Komponent button w react

Object Storage Arubacloud
+1 głos
444 wizyt
pytanie zadane 29 maja 2021 w JavaScript przez ShockWave Bywalec (2,350 p.)

Cześć, muszę zrobić zadanie z react, ale dopiero zaczynam i nie mam pojęcia jak się do tego zabrać. Chodzi o to by stworzyć komponent Button, który będzie umiał przyjmować parametry:

  • onBtnClick to parametr, który przyjmuje funkcje. Po kliknięciu w button, spraw aby przekazana funkcja z rodzica została uruchomiona. 
  • label to tekst, który będzie się wyświetlał jako wnętrze przycisku

Z góry dziękuję.

2 odpowiedzi

+2 głosów
odpowiedź 30 maja 2021 przez niezalogowany
komentarz 30 maja 2021 przez ShockWave Bywalec (2,350 p.)

Na przykładzie filmiku udało mi się zrobić takie coś, niestety dalej nie działa.

// Button.js

import React from 'react';

const Button = ({onClickFn, label}) => {
  
}

export default Button;

// App.js

import Button from './Button';

<Button onClick={() => onClickFn()}>{label}</Button>

 

komentarz 31 maja 2021 przez ShockWave Bywalec (2,350 p.)
przeniesione 31 maja 2021 przez ShockWave

Ma ktoś może wiedzę i jest w stanie pomóc?

// Button

import React from 'react';

function Button() {
  return(
    <button></button>
  );
}

export default Button;

//App

import Button from './Button';

<button onClick={() => onClickFn()}>{label}</button>

;

Mam tyle i nie wiem jak przekazać parametry.

komentarz 31 maja 2021 przez Paweł Nąckiewicz Nałogowiec (48,990 p.)

w pliku Button.js Twój komponent nic nie zwraca, musisz tam dodać co ma zwrócić np
 

return (
    <button onClick={funkcja}>{label}</button>
)

 

komentarz 31 maja 2021 przez ShockWave Bywalec (2,350 p.)
// App

import Button from './Button';
import React from 'react';



const onClickFn = (data) => {
      console.log(data);
    }

export default onClickFn;

// Button

import React from 'react';
import onClickFn from './App';

let label = "Click me!";

function Button() {
  return(
    <button onClick={onClickFn}>{label}</button>
  );
}


export default Button;

Poprawiłem ale test z przekazywaniem funkcji od rodzica nie działa. 

TEST

expect(received).toBe(expected) // Object.is equality

    Expected: 1
    Received: 0

      24 |         const wrapper = shallow(<Button {...props} onBtnClick={onClick} />);
      25 |         wrapper.simulate('click')
    > 26 |         expect(onClick.mock.calls.length).toBe(1);
         |                                           ^
      27 |     });
      28 |   });

 

0 głosów
odpowiedź 31 maja 2021 przez Paweł Nąckiewicz Nałogowiec (48,990 p.)

Przykład w TS
 

type BtnProps = {
  onClick: () => void,
  label: string
}

const BtnComponent = ({onClick, label}: BtnProps) => {
  return (
    <button onClick={onClick}>{label}</button>
  )
}

// wywołanie

const ParentComponent = () => {
  const sayPawi = () => {
    console.log('pawi')
  }

  return (
    <div>
      <BtnComponent onClick={sayPawi} label='say Pawi'/>
    </div>
  );
};

 

komentarz 31 maja 2021 przez ShockWave Bywalec (2,350 p.)

Jednego testu mi nie przechodzi kod, tego z zwracaną funckją.

// Button.js

import React from 'react';

let label = "Click me!";

function Button() {
  return(
    <button onClick={() => onClickFn()}>{label}</button>
  );
}


export default Button;

//TEST 

 Button tests › Dodano parametr funkcji callback odpalanej na kliku w button (onBtnClick)

    ReferenceError: onClickFn is not defined

       5 | function Button() {
       6 |   return(
    >  7 |     <button onClick={() => onClickFn()}>{label}</button>
         |                            ^
       8 |   );
       9 | }
      10 |

 

komentarz 31 maja 2021 przez Paweł Nąckiewicz Nałogowiec (48,990 p.)
A pokażesz kod dla tego testu?
komentarz 31 maja 2021 przez ShockWave Bywalec (2,350 p.)
import React from 'react';
import Button from './Button';
import Enzyme, { render, shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({ adapter: new Adapter() });

const props = {
    label: 'Click me!',
    onBtnClick: jest.fn()
};

describe('Button tests', () => {
    it('Dodano poprawnie komponent przycisku', () => {
      const wrapper = shallow(<Button {...props} />);
      expect(wrapper.find('button').exists()).toBe(true);
    });
    it('Dodano parametr potrzebny do przekazania napisu w buttonie (label)', () => {
      const wrapper = render(<Button {...props} />);
      expect(wrapper.text()).toMatch(props.label);
    });
    it('Dodano parametr funkcji callback odpalanej na kliku w button (onBtnClick)', () => {
        const onClick = jest.fn()
        const wrapper = shallow(<Button {...props} onBtnClick={onClick} />);
        wrapper.simulate('click')
        expect(onClick.mock.calls.length).toBe(1);
    });
  });

 

Podobne pytania

0 głosów
1 odpowiedź 136 wizyt
pytanie zadane 20 sierpnia 2021 w JavaScript przez nielotweb Bywalec (2,240 p.)
0 głosów
2 odpowiedzi 2,258 wizyt
pytanie zadane 2 maja 2020 w JavaScript przez kalczur Gaduła (4,320 p.)
0 głosów
1 odpowiedź 465 wizyt
pytanie zadane 25 marca 2021 w Inne języki przez karolina_web Nowicjusz (140 p.)

92,678 zapytań

141,582 odpowiedzi

320,061 komentarzy

62,039 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...