如何在反应中将参数传递给事件侦听器？

Question

我正在努力使我的代码简洁易读。所以我决定创建一个自定义挂钩来存储我的useStates。然后我创建了一个新文件来存储我的事件监听器。现在，我有三个文件：Page.js、useStates.js 和 Listeners.js。

问题是我不能在事件监听器中使用我的状态。

---

我尝试将我的状态存储在useStates.js 的全局范围变量中，并使用getter 传递它们。但它不起作用，因为更新状态并没有改变页面（但它确实重新渲染）。

---

useStates.js:

import react, { useState } from 'react';

export default () => {
  const [myState, setMyState] = useState(false);
  return { myState, setMyState };
}

Page.js:

import react from 'react';
import useStates from './useStates';
import { someActionListener } from './listeners';

export default () => {
  const states = useStates();

  return <SomeComponent
            somProp={states.myState}
            onSomeAction={ someActionListener } />
}

Listeners.js:

export const someActionListener = (e) => {
  // This should be done
  states.setMyState(!states.myState);
} 

Answer 1

您可以将states 传递给监听器：

export const someActionListener = (e, states) => {
  // This should be done
  states.setMyState(!states.myState);
}

...

<SomeComponent
  somProp={states.myState}
  onSomeAction={e => someActionListener(e, states)}
/>

或者 curry states 值，从而使 UI 更干净，它保存了匿名函数回调：

export const someActionListener = states =>  e => {
  // This should be done
  states.setMyState(!states.myState);
}

...

<SomeComponent
  somProp={states.myState}
  onSomeAction={someActionListener(states)}
/>

我建议调整动作侦听器以进行回调。无论如何，事件侦听器通常都会这样做。 curried 函数是关闭回调并返回事件侦听器回调的简单方法。这将状态和状态更新与事件侦听器逻辑分离，允许 React 组件同时使用它们来保持对状态及其更新方式的控制。

export const someActionListener = (callback) => (e) => {
  // This should be done
  callback();
}

将状态更新函数作为回调传入。

export default () => {
  const states = useStates();

  return (
    <SomeComponent
      somProp={states.myState}
      onSomeAction={someActionListener(
        () => states.setMyState(!states.myState))
      )}
    />
  );
}

或者使用功能状态更新，因为您正在切换状态值。这是为了避免回调中的陈旧状态附件。

<SomeComponent
  somProp={states.myState}
  onSomeAction={someActionListener(
    () => states.setMyState(states => ({
       ...states
       myState: !states.myState
    })
  }
/>