[英]Calling a function from outside functional component in react
假设我在功能组件之外有一个表单,如下所示:
<TextField
onChange={handleChange('name')}
value={values.name}
variant="outlined"
label="Name"
id="name"
required
/>
我的组件是这样的:
export default function App() {
const handleChange = (prop) => (event) => {
setValues({ ...values, [prop]: event.target.value });
};
}
如何从组件内部调用handleChange()
function?
您可以将handleChange
function 作为 prop 传递给您的功能组件:
const MyComp = (props) => {
...
return <TextField
onChange={props.handleChange('name')}
value={values.name}
variant="outlined"
label="Name"
id="name"
required
/>
}
// Reference function here.
<MyComp handleChange={handleChange}/>
如果您有一个表单组件作为组件的子组件,那么您可以这样做:-
ParentComponent.js
:-import ChildComponent from './ChildComponent
export default function ParentComponent() {
const handleChange = (prop) => (event) => {
setValues({ ...values, [prop]: event.target.value })
}
return (
<ChildComponent
handleChange={handleChange}
/>
)
}
ChildComponent.js
:-export default function ChildComponent({handleChange}) {
return (
<TextField
onChange={handleChange('name')}
value={values.name}
variant="outlined"
label="Name"
id="name"
required
/>
)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.