constructor(props) {
super(props);
// 设置 initial state
this.state = {
style: {display:"block",color:"red"},
actionTitle:false,
};
}
showhide = () => {
this.setState({actionTitle:!this.state.actionTitle});
if (this.state.style.display === "block") {
this.setState({ style: { display: "none", } })
} else {
this.setState({ style: { display: "block", } })
}
};
render() {
return <div>
<List renderHeader={() => (
<div className="pw-list-title">
<span>上传图片</span>
<a className="pw-list-title-extra" onClick={this.showhide}>{this.state.actionTitle ? '关闭详情' :'添加详情'}</a>
</div>
)}>
<Item>
<ImagePicker
files={files}
onChange={this.onFileChange}
onImageClick={(index, fs) => console.log(index, fs)}
selectable={files.length < 5}
/>
</Item>
</List>
<div style={this.state.style}>
{/*商品*/}
<List renderHeader="商品">
<InputItem>品名</InputItem>
<InputItem>货号</InputItem>
</List>
{/*价格*/}
<List renderHeader="价格">
<SearchItem
style={{ height: 'auto' }}
labelInValue
placeholder="输入颜色"
options={colors}
value={selectColors}
onSelect={this.onColorSelect}
onDeselect={this.onColorDeselect}
tags
>颜色</SearchItem>
<SearchItem
style={{ height: 'auto' }}
labelInValue
placeholder="输入尺码"
options={sizes}
value={selectedSizes}
onSelect={this.onSizeSelect}
onDeselect={this.onSizeDeselect}
tags
>尺码</SearchItem>
<InputItem
placeholder="0.00"
extra="¥"
type="money"
>进货单价</InputItem>
</List>
</div>
</div>
}
react.js 显示隐藏效果
猜你喜欢
转载自blog.csdn.net/sunjynyue/article/details/78161376
今日推荐
周排行