React.useCallback() 用於鏈式匿名函數

Question

通常，為了將onChange回調函數傳遞給組件，您可以執行以下操作：

const handleChange = (e) => {
  console.log(e.target.value)
}

return (
  <Component onChange={handleChange} />
)

如果你不希望Component來呈現每個主要成分做的時候，你必須在其包裝React.useCallback()掛鈎如下：

const handleChange = React.useCallback((e) => {
  console.log(e.target.value)
}, [])

return (
  <Component onChange={handleChange} />
)

在基於列表在 for 循環中生成此輸入的情況下，您希望回調知道更改的來源。 傳遞信息的最常見方式是按如下方式鏈接 lambda：

const fields = ['field1', 'field2', 'field3']

const handleChange = (fieldName) => (e) => {
  console.log(`${fieldName}: `, e.target.value)
}

return (
  <>
    {fields.map((x) => <Component onChange={handleChange(x)} />}
  </>
)

但是在這種情況下，在使用React.useCallback()鈎子將整個上下文保留在函數中的同時React.useCallback()外部和內部 lambdas 是不可能的。

在大多數情況下，我可以控制組件並更改回調以包含所需的數據，但通常會發生組件來自庫（ig Material-UI），因此無法修改。

React Hooks 可以通過什么方式完全記住這個回調？

Answer 1

您可以為每個元素生成事件處理程序，並記住事件處理程序數組。 創建元素時，通過它的索引獲取相關的事件處理程序：

 const { memo, useMemo } = React const Demo = ({ fields }) => { const handlers = useMemo(() => fields.map(fieldName => e => { console.log(`${fieldName}: `, e.target.value) }) , [fields]) return ( <div> { fields.map( (fieldName, i) => ( <input key={fieldName} onChange={handlers[i]} /> )) } </div> ) } const fields = ['field1', 'field2', 'field3'] ReactDOM.render( <Demo fields={fields} />, root )

 <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div id="root"></div>

Answer 2

我將如何處理這個問題是通過創建一個state並將其作為依賴項傳遞給useCallback鈎子，例如：

const [fields, setFields] = useState({'field1': "", 'field2': "", 'field3': ""});

const handleChange = React.useCallback((e) => {
  console.log(`${fieldName}: `, e.target.value);
  if(e.target.id === "field1") {
    let newFields = {...fields};
    fields.field1 = e.target.value;
    setFields(newFields);
  }
}, [fields])

return (
  <>
    {fields.map((x) => <Component onChange={handleChange(x)} />}
  </>
)

希望這對你有用。