如何在React的功能組件中將參數傳遞給功能

Question

如何將參數傳遞給功能組件中的函數？ 據我所知，在jsx中創建函數不是一個好習慣，對嗎？

function MyComponent(props) {
  function handleChange(event, data){
    console.log(event.target.value);
    console.log(data);
  }
  return <button onClick={handleClick(??)} value='Foo'>Click</button>
}

Answer 1

您可以將功能保留在functional component之外，

MyComponent = (props) => {
  return <button onClick={(event, props.data) => handleChange(event, props.data)} value='Foo'>Click</button>
}
function handleChange(event, data){
  console.log(event.target.value);
  console.log(data);
}

Answer 2

在React / jsx中使用非箭頭功能沒有什么特別的錯誤。 人們只是更頻繁地使用箭頭功能，因此不必綁定this關鍵字。

這樣的事情會很好地工作。

function MyComponent(props) {
  function handleChange(event, data){
    console.log(event.target.value);
    console.log(props.data)
  }
  return <button onClick={(event, props.data) => handleChange(event)} value='Foo'>Click</button>
}

Answer 3

這會起作用

function MyComponent(props) {
  function handleChange(event, data){
    console.log(event.target.value);
    console.log(data)

  }
  return <button onClick={(event) => handleChange(event, 'Some Custom Value')} value='Foo'>Click</button>
}

或者，如果您只想發送data屬性，則可以執行以下操作

function MyComponent(props) {
  function handleChange(data){
    console.log(data)

  }
  return <button onClick={(event) => handleChange('Some Custom Value')} value='Foo'>Click</button>
}

Answer 4

您可以嘗試以下方法：

function MyComponent (props) {
  function handleClick(e) {
    console.log(e.target);
    another(props);
  }
  function another (props) {
    console.log(props);
  }

  return (
    <button onClick={handleClick}>Test</button>
  )
}