如何從一個反應功能組件調用功能方法到另一個反應功能組件？

Question

我寫了兩個組件EnrolmentForm.js & Verhoff.js 。 代碼編寫如下。

我想調用驗證 function “從 Verhoff.js 組件到 EnrolmentForm.js 組件”。 我怎樣才能做到這一點？

我試圖到處尋找解決方案，但一無所獲。 感謝您的幫助。

1.) 注冊表格.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 來完成它，但最好重構代碼，這樣這些方法就不會被嵌入到渲染 function 中。

另見： https://reactjs.org/docs/hooks-reference.html#useimperativehandle