React component for selected items.
static propTypes = {
className:PropTypes.string,
type:PropTypes.oneOf([
'single',
'multiple',
'toggle',
'other'
]),
items:PropTypes.array,
value:PropTypes.array,
valueKey:PropTypes.string,
onChange:PropTypes.func,
};import ReactSelectedItems from './main';
let id=100;
class TestItem extends React.Component{
render(){
const {value,text,selected,...props} = this.props;
console.log(selected);
return (
<div {...props} data-kk={`kk-${selected}`} className="test-item">{value}={text}</div>
);
}
}
class App extends React.Component{
state = {
items1:[
{
value:1,
text:'abc'
},
{
value:2,
text:'bcd'
},
{
value:3,
text:'AAA'
}
],
items2:[
{
value:1,
text:'222-abc'
},
{
value:2,
text:'222-bcd'
},
{
value:3,
text:'222-AAA'
},
{
value:4,
text:'222-BBB'
},
{
value:5,
text:'222-CCC'
}
],
items3:[
{
value:1,
text:'333-abc'
},
{
value:2,
text:'333-bcd'
},
{
value:3,
text:'333-AAA'
},
{
value:4,
text:'333-BBB'
},
{
value:5,
text:'333-CCC'
}
],
items4:[
{
value:1,
text:'44477787-abc'
},
{
value:2,
text:'44477787-bcd'
},
{
value:3,
text:'44477787-AAA'
},
{
value:4,
text:'44477787-BBB'
},
{
value:5,
text:'44477787-CCC'
}
],
d4Value:[3],
dValue:[1,4],
dItems:[
{
value:1,
text:'44477787-abc'
},
{
value:2,
text:'44477787-bcd'
},
{
value:3,
text:'44477787-AAA'
},
{
value:4,
text:'44477787-BBB'
},
{
value:5,
text:'44477787-CCC'
}
]
};
_change1(inEvent){
console.log(inEvent.target.value);
}
_change2(inEvent){
console.log(inEvent.target.value);
}
_change3(inEvent){
console.log(inEvent.target.value);
}
//singleToggle:
_change4(inItem,inSelf){
console.log('Your own implemnts:->',inItem,inSelf);
}
_click1(){
const {dItems} = this.state;
dItems.push({
value:id++,
text:'DDDYDYD787-CCC'
});
this.setState({
dValue:[2,5],
dItems:dItems.slice(0)
})
}
_change5(inEvent){
console.log(inEvent.target.value);
}
render(){
return (
<div className="hello-react-active-items">
<h4>Single Active Item</h4>
<ReactSelectedItems value={[1]} items={this.state.items1} type='single' onChange={this._change1.bind(this)}>
<TestItem />
</ReactSelectedItems>
<h4>Multiple Active Item</h4>
<ReactSelectedItems value={[1,4]} items={this.state.items2} type='multiple' onChange={this._change2.bind(this)}>
<TestItem />
</ReactSelectedItems>
<h4>Toggle Active Item</h4>
<ReactSelectedItems value={[2]} items={this.state.items3} type='toggle' onChange={this._change3.bind(this)}>
<TestItem />
</ReactSelectedItems>
<h4>Other Active Item</h4>
<ReactSelectedItems value={this.state.d4Value} items={this.state.items4} type='other' onChange={this._change4.bind(this)}>
<TestItem />
</ReactSelectedItems>
<h4>Dynamic value/items</h4>
<button onClick={this._click1.bind(this)}>Dynamic Set value & items</button>
<ReactSelectedItems value={this.state.dValue} items={this.state.dItems} type='multiple' onChange={this._change5.bind(this)}>
<TestItem />
</ReactSelectedItems>
</div>
);
}
}