Question

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

我的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的东西。但是我不完全确定如何更新道具，因为不应该直接更改它们。

Answer 1

我最终使用withStateHandler创建了一个状态并对其进行了更新，我也将onClick函数的名称更改为setDestination，因此更有意义。

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

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

更新高阶组件中的道具

1 个答案: