javascript - 如何使用包装器控制按钮的切换

Question

我正在构建一个 Toggle Button，规范告诉我一组 Toggle Button 应该具有仅允许单击 (see example) 和多次单击 (see example) 的行为。

多次点击就好了，因为没有太多的逻辑要实现，但是单击对我来说很难。使用单击的主要思想是，如果我切换一个按钮并尝试切换另一个按钮，则前一个按钮应该失去他的 pressed 状态，而被点击的按钮应该有它。当 pressed 为真时，ToggleButton 具有不同的 CSS。

这是我的切换按钮组件:

const ToggleButton = props => {
  const { onClick, value, ...other } = props;
  const [pressed, setPressed] = useState(true);
  const renderPressedButton = () => {
    setPressed(!pressed);
    if (onClick) {
      onClick();
    }
  };
  return (
    <StyledToggleButton
      className={!pressed ? 'pressed' : null}
      pressed={pressed}
      data-value={value}
      {...other}
      onClick={renderPressedButton}
    />
  );
};

这是我的包装器(atm 我只得到我点击的类):

const onClickHandler = e => {
  const index = e.target.closest('.pressed');
  // console.log(index);
  // console.log('classe: ', e.target.className);
  if (index) {
    console.log('its pressed!');
  }
};

const ToggleButtonGroup = props => {
  const { ...other } = props;
  return <StyledToggleButtonGroup onClick={onClickHandler} {...other} />;
};

我想我应该使用 Context API 或者将我的 renderPressedButton 逻辑移到我的包装器中。有人有想法吗？

这就是我打算如何使用该组件:

<ToggleButtonGroup singleClick>
     <ToggleButton>One</ToggleButton>
     <ToggleButton>Two</ToggleButton>
</ToggleButtonGroup>

Answer 1

将状态提升到 ToggleButtonGroup。在那里维护一个切换索引列表，并提供一个 bool 值作为 ToggleButton 的 Prop ，使其完全无状态。通过这种方式，您将能够根据任何点击从 ToggleButtonGroup 中单独控制每个 ToggleButton。

function ToggleButtonGroup({ singleClick, children }) {
  const [checked, setChecked] = React.useState([]);

  const handleClick = event => {
    // event.target should have your clicked checbox reference
    const index = event.target.dataset.index;

    if (singleClick) {
      setChecked([index]);
    } else {
      if (checked.includes(index)) {
        setChecked(checked.filter(eachIndex => eachIndex !== index));
      } else {
        setChecked([...checked, index]);
      }
    }
  };

  return (
    <div onClick={handleClick}>
      {React.Children.map(children, (child, index) => {
        return React.cloneElement(child, {
          dataIndex: index,
          pressed: checked.includes(index)
        });
      })}
    </div>
  );
}



function ToggleButton({ dataIndex, pressed, ...rest }) {
  return <div data-index={dataIndex} className={!pressed ? 'pressed' : null} {...rest} />;
}