antd tag.CheckableTag 传值报错

最近在用ant-design开发 但是在用teg.CheckableTag的时候出现了问题 找不到什么原因

这是我的父组件

  //MyCheckableTag 为子组件
 addCustomLabelS = (e) => {
    this.props.dispatch({type: 'CHECKABLETAG_ADD', item: {num: this.state.customLabelInputValue, status: "true"}})
    this.setState({
      customLabelInputValue: ''
    })
  }
  addCustomLabelInputChange = (e) => {
    this.setState({customLabelInputValue: e.target.value});
  }


<Row gutter={50}>
  <Col span={3}>标签定向 :</Col>
  <Col span={20}>
    <div style={{margin: '6px 0 10px 0'}}>自定义标签</div>
    <div className='customLabels'>
    <Input onChange={this.addCustomLabelInputChange} value={this.state.customLabelInputValue}
                       placeholder="自定义添加标签"/>
    <Button type="primary" onClick={this.addCustomLabelS}><Icon type="plus"/>添加</Button>
    </div>
    <div>
       {this.props.list.CheckableTag.map((item, index) => {
           return <MyCheckableTag key={index} status={item}>{item.num}</MyCheckableTag>
       })}
    </div>
  </Col>
  <Col span={1}>
     <span className='asterisk'>*</span>
   </Col>
</Row>

子组件 也就是官网的 CheckableTag组件

import React, {Component} from 'react'
import {Tag} from 'antd';

const {CheckableTag} = Tag;

class MyCheckableTag extends Component {
  constructor(props) {
    super(props)
    console.log(props)
    this.state = {
      checked: props.status === 'true' ? true : false
    }
  }

  handleChange = (checked) => {
    this.setState({checked})
  }

  render() {
    return <CheckableTag {...this.props} checked={this.state.checked} onChange={this.handleChange}/>;
  }
}

export default MyCheckableTag

这是 reducers

let list = [
  {
    num: 1,
    status: 'true'
  }, {
    num: 2,
    status: 'false'
  }, {
    num: 3,
    status: 'true'
  }, {
    num: 4,
    status: 'false'
  }, {
    num: 5,
    status: 'true'
  },
]
let CheckableTag = (state = list, action) => {
  console.log(action.item)
  switch (action.type) {
    case 'CHECKABLETAG_ADD': {
      return [...state, action.item]
    }
    default:
      return state
  }

}
export default CheckableTag

场景是通过输入input中 Button获取input的value 然后传给redux达到一个添加CheckableTag的意思 这一步现在没有问题 已经实现

但是CheckableTag有一个类似checkbox 的效果 就是选中和未选中 这些数据都可以获取到 我现在在父组件中需要用到他们各个的选中状态
选中状态可以通过子组件的handleChange方法回调获取到
选取的是哪个子组件可以通过子组件里this.props.children获取到
但是我该怎么在父组件中获取到CheckableTag的选中状态 我通过父子通信 和 redux 的方法都行不通会报错

clipboard.png

真的找不到方法了 请各位大神帮我看看 挺急的 ~~~

阅读 3.9k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进