React自定义组件点击赋值传props时取值为undefined的问题咨询

问题本质：你使用的Option1、Option2为自定义封装组件，并非浏览器原生DOM节点。仅原生表单/可点击DOM元素（如<button>、<input>）会自动将自身value属性挂载到点击事件的event.target上；自定义组件接收到的value只是传入的普通参数，既不会自动绑定到内部真实DOM，也不会被注入到事件对象中，因此取值永远为undefined是符合React运行逻辑的。

可落地的实现方案 #

• 方案1：显式传递目标选中值（优先推荐）
  完全不依赖事件对象回传值，在绑定点击回调时直接将当前选项对应的'single'/'whole'作为参数传入dispatch方法，既不需要修改原有自定义组件的内部实现，也不会因为组件内部结构变更导致取值失效。
  改造后的渲染代码：

  render() {
    return(
      <Container>
        <Option1 
          onClick={() => this.props.contributionValue('single')}
        >
          <Image src={Icon1}/>
          <Text>Chcem finančne prispieť konkrétnemu útulku</Text>
        </Option1>
        <Option2 
          onClick={() => this.props.contributionValue('whole')}
        >
          <Image src={Icon2}/>
          <Text>Chcem finančne prispieť celej nadácii</Text>
        </Option2>
      </Container>
    )
  }
  

  对应的mapDispatchToProps简化为直接接收字符串参数即可：

  const mapDispatchToProps = (dispatch) => {
      return {
          contributionValue: (selectedType) => dispatch(selectType(selectedType))
      }
  }
  

• 方案2：改造自定义组件实现值与事件的透传
  如果希望保留从事件对象中读取值的写法，需要在Option1、Option2组件的内部实现中，将外部传入的value、onClick参数绑定到组件内部渲染的真实可点击DOM节点上，示例实现如下：

  // Option1 组件内部实现示例
  const Option1 = ({ value, onClick, children }) => {
    return (
      <button
        type="button"
        value={value}
        onClick={onClick}
        {/* 保留原有自定义组件的样式逻辑 */}
      >
        {children}
      </button>
    )
  }
  

  透传完成后，点击时事件的target就指向内部的原生button节点，即可正常读取到e.target.value。但这种方式维护成本更高：一旦组件内部结构发生调整（比如嵌套其他子元素），事件冒泡可能让e.target指向内部的Image、Text等节点，再次出现取值undefined的问题。

避坑提示 #

• 自定义组件接收到的所有props都是普通函数/值，不会自动获得原生DOM的行为特性，不存在“传了value就能自动通过事件回传”的默认逻辑。
• 涉及自定义组件的点击传值场景，优先选择显式传参的实现方式，比依赖原生事件对象透传值的稳定性高很多。

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