Jestem nowy w reagowaniu i mam problem z przekazaniem parametru do funkcji obsługi. Mój kod testowy wygląda następująco:

import React from 'react';
import { useState, useEffect } from 'react';
import './App.css';

function Container(props) {
  return <button onClick={props.clickHandler("A")}>Tap</button>;
}

function App() {

  function clickHandler(char) {
    console.log(char);
  }

  return <Container clickHandler={clickHandler} />
}

export default App;

Po dotknięciu przycisku nic się nie dzieje, nie ma dziennika konsoli. Co ja tu robię źle? Próbowałem wcześniej obsługi bez parametrów i działają dobrze.

1
Kex 1 kwiecień 2020, 17:03

3 odpowiedzi

Najlepsza odpowiedź

Zamień Kontener na to

function Container(props) {
  return <button onClick={() => props.clickHandler("A")}>Tap</button>;
}

Musisz przekazać funkcję do onClick , ale ją wywołałeś, więc przekazujesz wartość zwracaną przez clickHandler , która jest niezdefiniowana

4
Tonoslav 1 kwiecień 2020, 14:05

Najpierw musisz przekazać funkcję do komponentu Container w następujący sposób: powiedzmy, że twój komponent Container jest elementem div w ten sposób:

const Container = props => {
      return(
          <div onClick={props.clickHandler} > your container content here </div>
      )
}

export default Container;

To powinno działać :)

0
Salah Eddine Makdour 1 kwiecień 2020, 14:08

Możesz użyć funkcji zagnieżdżonej strzałki w dłoni.

Zagnieżdżając funkcję strzałki, możesz dodawać dodatkowe parametry na dowolnym etapie procesu.

const handled = () => () => () => {}

Wypróbuj wersję demonstracyjną w tekście:

function Container(props) {
  return <button onClick={props.clickHandler("AAA")}>Tap</button>;
}

function App() {
  const clickHandler = value => char => e => {
    console.log(value, char, e.target.innerText);
  };
  return <Container clickHandler={clickHandler(111)} />;
}

ReactDOM.render(<App />, document.getElementById("root"));
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script>
0
keikai 3 kwiecień 2020, 10:05