如何从一个反应功能组件调用功能方法到另一个反应功能组件？

Question

我写了两个组件EnrolmentForm.js & Verhoff.js。代码如下所述。

我想调用 verify 函数“从 Verhoff.js 组件到 EnrolmentForm.js 组件”。我该怎么做？

我试图到处寻找解决方案，但一无所获。感谢您的帮助。

1.) EnrolmentForm.js

function EnrolmentForm() {
  return (
    <div>
            <div className="container mt-2">             
                    <label>Aadhar Number : </label>
                    <input
                      className="input-group form-control"
                      type="password"
                      name="aadharnumber"
                    />
                  </div>
                    </div>
)}

2.) Verhoff.js

import React, { useState } from "react";

function Verhoff() {

     const [aadharValue, setAadharValue] = useState("");
     const [errorMessage, setErrorMessage] = useState("")
   
//multiplication table d
var d = [ [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ], [ 1, 2, 3, 4, 0, 6, 7, 8, 9, 5 ],
        [ 2, 3, 4, 0, 1, 7, 8, 9, 5, 6 ], [ 3, 4, 0, 1, 2, 8, 9, 5, 6, 7 ],
        [ 4, 0, 1, 2, 3, 9, 5, 6, 7, 8 ], [ 5, 9, 8, 7, 6, 0, 4, 3, 2, 1 ],
        [ 6, 5, 9, 8, 7, 1, 0, 4, 3, 2 ], [ 7, 6, 5, 9, 8, 2, 1, 0, 4, 3 ],
        [ 8, 7, 6, 5, 9, 3, 2, 1, 0, 4 ], [ 9, 8, 7, 6, 5, 4, 3, 2, 1, 0 ] ];

// permutation table p
var p = [ [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ], [ 1, 5, 7, 6, 2, 8, 3, 0, 9, 4 ],
        [ 5, 8, 0, 3, 7, 9, 6, 1, 4, 2 ], [ 8, 9, 1, 6, 0, 4, 3, 5, 2, 7 ],
        [ 9, 4, 5, 3, 1, 2, 6, 8, 7, 0 ], [ 4, 2, 8, 6, 5, 7, 3, 9, 0, 1 ],
        [ 2, 7, 9, 3, 8, 0, 6, 4, 1, 5 ], [ 7, 0, 4, 6, 9, 1, 3, 2, 5, 8 ] ];

// inverse table inv
var inv = [ 0, 4, 3, 2, 1, 5, 6, 7, 8, 9 ];

// converts string or number to an array and inverts it
const invArray=(array)=> {
    if (Object.prototype.toString.call(array) == "[object Number]") {
        array = String(array);
        console.log(array, "!!!");
    }
    if (Object.prototype.toString.call(array) == "[object String]") {
        array = array.split("").map(Number);
        console.log(array, "!!!")

    }
    return array.reverse();
};

// generates checksum
const generate=(array)=> {
    console.log("in generate")

    var c = 0;
    var invertedArray = array.reverse();

    for (var i = 0; i < invertedArray.length; i++) {
        console.log(d[c][p[((i + 1) % 8)][invertedArray[i]]]);
        c = d[c][p[((i + 1) % 8)][invertedArray[i]]];

    }
    return inv[c];
};

// validates checksum
const validate=(array)=> {

    var c = 0;
    var invertedArray = invArray(array);

    for (var i = 0; i < invertedArray.length; i++) {
        c = d[c][p[(i % 8)][invertedArray[i]]];
    }

    return (c === 0);
};


const verify=(e)=>
  {
    setErrorMessage("");
      setAadharValue(e.target.value);
      console.log(aadharValue);
      if(e.target.value.length === 12)
      {
        var aadhaarArray = e.target.value.split('');
        var toCheckChecksum = aadhaarArray.pop();
        console.log(toCheckChecksum);
        if(generate(aadhaarArray) == toCheckChecksum)
        {
            setErrorMessage("valid ");
        }
        else{
            setErrorMessage("invalid");
        }
    }
  };
  
}
export default Verhoff;

Answer 1

您可以使用 imperativeHandle 来完成它，但最好重构代码，这样这些方法就不会嵌入到渲染函数中。

另请参阅：https://reactjs.org/docs/hooks-reference.html#useimperativehandle

如何从一个反应功能组件调用功能方法到另一个反应功能组件？

How to call a functional method from one react functional component to another react functional component?

javascript

reactjs

react-props

react-hooks

react-functional-component