如何从 React 中的其他组件调用组件中的函数？答案

【问题标题】：How can I call a function in a component from other components in React?如何从 React 中的其他组件调用组件中的函数？
【发布时间】：2021-10-22 06:21:47
【问题描述】：

我有以下组件结构：

这是输入组件。当 onChange 事件触发时，将调用 validate 函数。

import React, {FC, useState} from 'react';

interface InputProps {
    config : {}
}

/**
 * @param config
 * @constructor
 */
const Input: FC<InputProps> = ({config}) => {

    /**
     * @param inputValue
     */
    const validate: Function = (inputValue: any) =>
    {
        // Does input validation 
    }

    return(
        <div>
            <input 
                onChange={(event) => {
                    validate(event.target.value);
                }}
            />
        </div>
    );
}

export default Input;

这是我的 App.tsx。我想在按钮 onClick 事件中调用所有输入的验证。

import React, {useState} from "react";
import Form from './components/Form/Form';
import Input from './components/UI/Input/Input';
import Button from './components/UI/Button/Button';

const App = () => {

  return(
    <div className="app">
        <Form title="Simple form">
            <Input label="Email address"/>
            <Input label="Password"/>
            <Button config={{
                text: 'Sign in',
                onClick: (event) => {
                    // Here I would like to call the validatе method on the email address and  
                    // password inputs, but I don’t know how to do this yet.
                }
            }}/>
        </Form>
    </div>
  );
}

export default App;

【问题讨论】：

在 React 中这样做有点反模式，但您可以使用 React.forwardRef 和 useImperativeHandle 挂钩来完成此操作。
@DrewReese 感谢您的评论。我最近开始研究反应。如果这是一个反模式，我应该怎么做？
更“React”的方法是让App 或Form 保持表单状态，即与按钮在同一个组件中的“事实来源”，传递state 和 updater 回调到输入。见lifting state up。
reactjs.org/docs/lifting-state-up.html

标签： reactjs typescript react-typescript

【解决方案1】：

所有有用的信息都通过专家在 cmets 部分中提供，这里只是您需要的实现。

提升状态

我们需要将状态从Input 组件提升到它的父组件。

在App 组件中：

import React, {useState} from "react";
import Form from './components/Form/Form';
import Input from './components/UI/Input/Input';
import Button from './components/UI/Button/Button';

const App = () => {
 const [email, setEmail] = useState("");
 const [password, setPassword] = useState("");

  return(
    <div className="app">
      <Form title="Simple form">
        <Input label="Email address" value={email} onAction={setEmail} />
        <Input label="Password" value={password} onAction={setPassword} />
        <Button config={{
           text: 'Sign in',
           onClick: () => {
             validate(emailAddress);
             validate(password);
           }}
        />
      </Form>
    </div>
  );
}

export default App;

现在，在Input 组件中：

const Input: FC<InputProps> = ({value, onAction}) => {
  return (
    <div>
      <input 
        value={value} 
        onChange={(event) => {onAction(event.target.value)}} 
      />
    </div>
  )
}

export default Input;

解释：

随着input 元素的变化，onAction 函数将被调用。 onAction 方法是您在 App 组件上传递的 setState 函数，因此 input 元素中的每次更改都会更新 email 和 password 变量。

现在，在App 组件中，您拥有password 和email 值，因此可以使用Button 元素轻松验证它们。

【讨论】：

【解决方案2】：

您需要提升验证功能才能在单击按钮时进行验证。将函数的引用传递给输入等组件。

【讨论】：