styled-component中button的onClick点击事件未按预期生效如何解决

1. 按钮背景色未跟随state更新的原因 #

你的styled-component样式逻辑错误，当前Button组件的background-color判断的是props.onClick是否存在，而你所有按钮都传入了onClick事件，所以背景色永远固定为#f4f4f4，根本没有读取你传入的color属性。
修复方案：修改Button的样式定义，直接读取传入的color属性即可：

const Button = styled.button`
  display: block;
  line-height: 16px;
  padding: 7px 0 9px;
  width: 150px;
  font-size: 13px;
  text-align: center;
  border-radius: 8px;
  border: none;
  /* 替换原来的判断逻辑，直接用传入的color prop */
  background-color: ${props => props.color};
  color: rgba(34, 34, 34, 0.8);
`;

2. 所有按钮同步变色的原因 #

你当前只定义了一个全局的color状态，所有按钮都绑定了同一个color值，只要修改状态所有按钮都会同步更新。
如果需要实现点击单个按钮单独切换状态，可给每个按钮单独维护状态，示例实现如下：

// 存储三个按钮的颜色状态
const [colorList, setColorList] = useState(['#f4f4f4', '#f4f4f4', '#f4f4f4']);
const onClick = (index) => {
  const newColorList = [...colorList];
  newColorList[index] = newColorList[index] === '#f4f4f4' ? '#fff' : '#f4f4f4';
  setColorList(newColorList);
};

// 渲染时传入对应索引的颜色和点击事件
<ButtonsWrapper>
  <Button color={colorList[0]} onClick={() => onClick(0)}>
    체결 거래
  </Button>
  <Button color={colorList[1]} onClick={() => onClick(1)}>
    판매 입찰
  </Button>
  <Button color={colorList[2]} onClick={() => onClick(2)}>
    구매 입찰
  </Button>
</ButtonsWrapper>

如果是要实现单选效果（同一时间只有一个按钮激活），可以存储激活的索引值：

const [activeIndex, setActiveIndex] = useState(-1);
const onClick = (index) => {
  setActiveIndex(index === activeIndex ? -1 : index);
};

// 渲染时判断
<Button 
  color={activeIndex === 0 ? '#fff' : '#f4f4f4'} 
  onClick={() => onClick(0)}
>
  체결 거래
</Button>

3. 自定义组件命名为Button是否会冲突 #

不会冲突。JSX的识别规则是：小写开头的标签识别为原生DOM标签，大写开头的标签识别为自定义组件。你定义的Button是大写开头，渲染时会优先识别为你自定义的styled组件，和原生的<button>小写标签完全不冲突。 #

内容的提问来源于stack exchange，提问作者JiwanJeon94