I have been developing with ant-design recently, but I have a problem when using teg.CheckableTag
. I can"t find any reason
this is my parent component
//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>
the subcomponent is the CheckableTag component of the official website
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
this is 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
The scenario is to get the value of input by typing Button in input and then pass it to redux to achieve the meaning of adding CheckableTag. This step is no problem now and has been implemented
. but CheckableTag has a checkbox-like effect, that is, both selected and unselected data can be used in the parent component.
the selected state can be obtained through the handleChange
method callback of the child component. The
selected child component can get
through this.props.children
in the child component, but how can I get the
from the parent component? To the selected state of CheckableTag
, neither of my parent-son communication nor redux methods will report an error
I really can"t find a way. Please take a look at it for me. I"m in a hurry.