在反应中从外部功能组件调用功能

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

在反应中从外部功能组件调用功能

Calling a function from outside functional component in react

reactjs

react-props

react-functional-component