第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

如何使通過 useState 掛鉤更改狀態(tài)的函數可重用？

如何使通過 useState 掛鉤更改狀態(tài)的函數可重用？

慕斯709654 2021-11-12 16:34:06
假設我有以下代碼用于更改輸入值并更新組件的狀態(tài)：const handleInputChange = e => {    let value = e.target.value;    let name = e.target.name;    let type = e.target.type;    // some other code    setInput(nextState);  };但是，由于我有使用相同功能的不同組件，因此我想將其設為可導出的實用功能。但是它有來自useState鉤子的“setInput”函數調用。我應該將它setInput作為參數傳遞給每個handleInputChange()調用，例如：onChange={e => handleInputChange(e, setInput)}或者有更好的處理方法嗎？
查看完整描述

2 回答

?
尚方寶劍之說

TA貢獻1788條經驗 獲得超4個贊

如果您要創(chuàng)建自定義掛鉤，則可以在其中調用其他掛鉤。所以你可以setInput在鉤子內檢索而不是在那里傳遞它：



const useCustomHook = (initialValue) => {


  const [input, setInput] = useState(initialValue);


  // ...


  const handleInputChange = e => {

    let value = e.target.value;

    let name = e.target.name;

    let type = e.target.type;


    // some other code


    setInput(nextState);

  };


  return handleInputChange;

}

這input將綁定到調用useCustomHook.


編輯：


將@Shota 的回答與此相結合，您可以使用useState鉤子創(chuàng)建一個組件來在內部處理狀態(tài)：



const CustomInput(initialState) => {


  const [input, setInput] = useState(initialValue);


  const handleInputChange = e => {

    // ...

    setInput(nextState);

  };


  return (<input type="text" onChange={handleInputChange} />);

} 


要input在外部世界中使用，只需從鉤子中返回它：



useCustomHook = () => {

  // ...

  return {

    handleInputChange,

    input

  }

}


查看完整回答
反對 回復 2021-11-12
?
拉莫斯之舞

TA貢獻1820條經驗 獲得超10個贊

您可以使用 on change 功能道具創(chuàng)建一個全新的可重用組件。


import React from 'react';


const CommonInput = ({handleChange}) => {


  const handleInputChange = e => {

    let value = e.target.value;

    let name = e.target.name;

    let type = e.target.type;


    // some other code


    setInput(nextState);

    handleChange(nextState);

  };


  return (<input type="text" onChange={handleInputChange} />);

}


export default CommonInput;

我們可以在任何我們想要的地方重用它：


import React from 'react';


const Parent = (props) => (

  <CommonInput handleChange={nextStateData => {}}/>

  );


export default Parent;

一般來說，我更喜歡創(chuàng)建一個包含一些功能的新組件，而不是只重用函數。


查看完整回答
反對 回復 2021-11-12
  • 2 回答
  • 0 關注
  • 141 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號