React自定义Radio按钮onClick无法更新state问题求助

我一眼就看出问题所在啦——你用div（也就是自定义的TextRadioButton）模拟单选按钮，但div本身没有原生value属性，而且onClick事件里的e.target大概率指向的是内部子元素（比如TextContainer），根本拿不到你想要的分类值，自然没法更新category状态。下面给你几个靠谱的解决办法：

方法1：直接传递目标值给事件函数（最简便） #

别依赖事件对象了，直接把对应分类值传给处理函数就行：

先修改事件处理函数，让它接收一个值参数：

const handleSubmit = (selectedValue) => {
  setCategory(selectedValue);
};

然后绑定onClick时直接传入对应值：

<TextRadioButton onClick={() => handleSubmit("Salads")} name="category" >
  <RadioButtonText>
    <TextContainer>Salads</TextContainer>
  </RadioButtonText>
</TextRadioButton>
<TextRadioButton onClick={() => handleSubmit("Pasta")} name="category">
  <RadioButtonText>
    <TextContainer>Pasta</TextContainer>
  </RadioButtonText>
</TextRadioButton>

这样不管你点到按钮内部哪个元素，都能精准传递分类值，完美更新state。

方法2：用currentTarget+data属性获取值 #

如果你坚持想用事件对象，那就用e.currentTarget（永远指向绑定事件的父元素）配合data-*属性来拿值：

先把value换成data-value属性：

<TextRadioButton data-value="Salads" onClick={handleSubmit} name="category" >
  <RadioButtonText>
    <TextContainer>Salads</TextContainer>
  </RadioButtonText>
</TextRadioButton>
<TextRadioButton data-value="Pasta" onClick={handleSubmit} name="category">
  <RadioButtonText>
    <TextContainer>Pasta</TextContainer>
  </RadioButtonText>
</TextRadioButton>

再修改事件处理函数：

const handleSubmit = (e) => {
  // currentTarget指向绑定事件的TextRadioButton，读取data-value的值
  const selectedValue = e.currentTarget.dataset.value;
  setCategory(selectedValue);
};

这种方式也能稳定拿到你需要的分类值。

额外优化：给选中按钮加样式（模拟单选按钮的选中状态） #

既然是模拟单选按钮，得让用户直观看到哪个被选中对吧？可以根据category的值给按钮加选中样式：

先修改TextRadioButton的Styled组件，接受isSelected属性：

export const TextRadioButton = styled.div`
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 10px;
  background: ${props => props.isSelected ? "rgba(123, 104, 238, 0.7)" : "rgba(176, 167, 230, 0.5)"};
  box-shadow: ${props => props.isSelected ? "0px 4px 4px rgba(123, 104, 238, 0.7)" : "0px 4px 4px rgba(176, 167, 230, 0.5)"};
  border-radius: 20px;
  margin-left: -10px;
  margin: 8px;
  cursor: pointer; /* 加上鼠标指针提示可点击 */
`;

然后在JSX里根据category值设置isSelected：

<TextRadioButton 
  data-value="Salads" 
  onClick={handleSubmit} 
  name="category"
  isSelected={category === "Salads"}
>
  <RadioButtonText>
    <TextContainer>Salads</TextContainer>
  </RadioButtonText>
</TextRadioButton>
<TextRadioButton 
  data-value="Pasta" 
  onClick={handleSubmit} 
  name="category"
  isSelected={category === "Pasta"}
>
  <RadioButtonText>
    <TextContainer>Pasta</TextContainer>
  </RadioButtonText>
</TextRadioButton>

这样用户一眼就能看出自己选了哪个分类，体验更到位~

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