如何在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>
  )
}