最近在用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 的方法都行不通会报错
真的找不到方法了 请各位大神帮我看看 挺急的 ~~~