將資料從元件傳遞到 Util 文件

Question

我試圖將 data 從一個 React 元件傳遞到另一個元件，並努力理解如何將此 data 呼叫到目標檔案

基本上想要將 <input /> 值從 component.js 傳遞到 Util.js 檔案中的函式。

到目前為止，我在 component.js 中進行了以下嘗試：

const [distance, setDistance] = useState();

function handleChange(value){
    setDistance(value.target.value);
}

return {
    <input className="input" name="distance" type={`number`} onChange={handleChange} />
}

Util.js

#

export const filterByDistance = function(){       
}

那麼要呼叫它我需要做這樣的事情嗎？

import {distance} from './component.js';

Answer 1

不要嘗試將變數從component.js 匯入到Utils.js，您應該以相反的方式執行此操作：將Util.js 函數導入component.js 然後呼叫它。

import { filterByDistance } 從 './Util.js';

const [distance, setDistance] = useState();

function handleChange(value){
    setDistance(value.target.value);
    filterByDistance(value.target.value)
}

return { ... }

然後接受該值作為參數：

export const filterByDistance = function(value){
    console.log(value)
}