[英]How to pass arguments to function in functional component in React
How can I pass arguments to a function in functional component? 如何将参数传递给功能组件中的函数? As far as I know, creating function in jsx is not good practice right?
据我所知,在jsx中创建函数不是一个好习惯,对吗?
function MyComponent(props) {
function handleChange(event, data){
console.log(event.target.value);
console.log(data);
}
return <button onClick={handleClick(??)} value='Foo'>Click</button>
}
You can keep function outside of functional component
, 您可以将功能保留在
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);
}
There isnt anything particularly wrong with using a non-arrow function in React/jsx. 在React / jsx中使用非箭头功能没有什么特别的错误。 People just use arrow-functions more often so they don't have to bind the
this
keyword. 人们只是更频繁地使用箭头功能,因此不必绑定
this
关键字。
Something like this would work perfectly fine. 这样的事情会很好地工作。
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>
}
This will work 这会起作用
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>
}
Or if you only want to send the data property, you could do something like 或者,如果您只想发送data属性,则可以执行以下操作
function MyComponent(props) {
function handleChange(data){
console.log(data)
}
return <button onClick={(event) => handleChange('Some Custom Value')} value='Foo'>Click</button>
}
You can try this: 您可以尝试以下方法:
function MyComponent (props) {
function handleClick(e) {
console.log(e.target);
another(props);
}
function another (props) {
console.log(props);
}
return (
<button onClick={handleClick}>Test</button>
)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.