react.js 顯示隱藏效果
阿新 • • 發佈:2018-11-02
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>
}