javascript - 更新高阶组件中的 Prop

Question

我正在尝试切换单选按钮并将 Prop 更新为它设置的当前值。

我的 Modal 组件正在渲染一个 RadioButton 组件:

<RadioButton
  currentValue={destination}
  name={text.newOpp}
  onChange={onClick}
  value={text.newOpp}
  labelText={text.newOpp}
/>

正在传入 onClick 函数，此时看起来像这样:

export const onClick = ({ destination }) => ({ target }) => {
  let copyDestination = {};
  copyDestination.destination = target.name;
  destination = copyDestination;
  // this doesn't really do anything
};

export default compose(
  ...
  ...
  withProps({ destination: '' }),
  ...
);

RadioButton 使用 recompose 进行了增强，并将此函数作为 prop 传入:

export const checked = ({ currentValue, value }) => {
  return currentValue === value;
};

这就是组件的输入部分的样子:

    <input
      checked={checked}
      className={styles.input}
      id={uniqueIdForHTML}
      name={name}
      onChange={onChange}
      type="radio"
      value={value}
    />

本质上，这应该是这样工作的，当我点击一个单选按钮时，我将其 currentValue 属性更新为 target.name 等于。但我不完全确定如何更新 Prop ，因为不应直接更改它们。

Answer 1

我最终使用 withStateHandler 来创建状态并更新它，我还将我的 onClick 函数的名称更改为 setDestination 所以它更有意义。

export const setDestination = ({ destination }) => ({ target }) => ({
  destination: target.name,
});

export default compose(
  setDisplayName('OpportunityPageFeatures/CopyDestinationModal'),
  withUniqueIDForHTML,
  withStateHandlers({ destination: '' }, { setDestination }),
  consoleLogProps,
);