在react中从外部功能组件调用函数

Question

假设我在功能组件之外有一个表单，如下所示：

   <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()

函数？

Answer 1

您可以将

handleChange

函数作为 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}/>

Answer 2

如果您有一个表单组件作为组件的子组件，那么您可以执行如下操作：-

• 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
    />
  )
}