回答
您可以使用一個將組件保留其狀態和切換列表項的值的父組件。然後,您可以爲每個列表項目創建組件,這些組件將使活動屬性保持您可以點擊切換的狀態。
class ListItem extends React.Component {
constructor(props) {
super(props);
this.state = {active: false}
}
render() {
return (
<a
onClick={() => {
this.setState(prevState => {
let newState = !prevState.active;
this.props.handleClick(newState, this.props.value);
return {active: newState}
})
}}
className={!this.state.active ? '' : 'selected'}
href="#">
{this.props.value}</a>
)
}
}
class Select extends React.Component {
constructor(props) {
super(props);
this.state = {
showList: false,
value: []
}
this.handleItemClick = this.handleItemClick.bind(this)
}
componentDidMount() {
document.addEventListener('mousedown', (e) => {
if(!this.node.contains(e.target)) {
this.setState({showList: false})
}
})
}
componentWillUnmount() {
document.removeEventListener('mousedown');
}
renderValue() {
let {value} = this.state;
if(!value.length) return "Select..."
else return value.join(', ')
}
toggleList() {
this.setState(prevState => ({showList: !prevState.showList}))
}
handleItemClick(active, val) {
let {value} = this.state;
if(active) value = [...value, val]
else value = value.filter(e => e != val);
this.setState({value})
}
render() {
return (
<div
ref={node => this.node = node}
className="select">
<button onClick={this.toggleList.bind(this)}>
<span className="select_value">
{this.renderValue()}
</span>
</button>
<div
className={"select_list " + (!this.state.showList && 'hide')}>
<ListItem handleClick={this.handleItemClick} value="Lorem" />
<ListItem handleClick={this.handleItemClick} value="Ipsum" />
<ListItem handleClick={this.handleItemClick} value="Dolor" />
</div>
</div>
)
}
}
ReactDOM.render(
<Select />,
document.getElementById('container')
);
button {
background: white;
width: 100%;
padding: 10px 15px;
border: 1px solid rgba(0, 0, 0, .1);
border-radius: 5px;
cursor: pointer;
text-align: left;
}
.select_list {
width: 100%;
background: white;
border: 1px solid rgba(0, 0, 0, .1);
border-radius: 5px;
}
.select_list a {
padding: 10px 15px;
display: flex;
color: black;
text-decoration: none;
position: relative;
align-items: center;
}
.select_list a:before {
width: 15px;
height: 15px;
content: '';
border: 1px solid rgba(0, 0, 0, .1);
border-radius: 5px;
margin-right: 10px;
display: block;
}
.select_list a.selected:before {
background: #0493D1;
content: '✓';
color: white;
font-size: 11px;
text-align: center;
line-height: 15px;
}
.hide {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container"></div>
感謝您的重播,但下拉UI像任何下拉並不反映);每當我從一個組件切換到另一個組件時,這條線給我錯誤。 「無法在'EventTarget'上執行'removeEventListener':需要2個參數,但只有1個參數。」 –
document.removeEventListener(「鼠標按下」顯示此 –
我傳遞了一個空函數作爲第二個參數,問題已解決,但現在無論何時我切換組件,它都會給我提供componentDidMount()函數的錯誤「TypeError:Can not read property'contains'of null」。請幫助我@NenadVarcar –
- 1. 多選下拉與複選框功能
- 2. 語義UI下拉列表中選擇
- 3. 多選複選框下拉菜單
- 4. RoR:語義UI和複選框
- 5. 多選下拉列表:自定義複選框
- 6. 在多選擇下拉反應本土
- 7. 語義UI多選下拉不起作用
- 8. 使用語義下拉的多選select
- 9. 打開在下拉多複選框
- 10. 添加複選框,下拉
- 11. 語義ui在下拉列表中選擇默認選項
- 12. 語義UI下拉提交表單上的選擇選項
- 13. 反應語義UI搜索支持多選?
- 14. 語義-UI-反應,選擇,多,不能設置默認值
- 15. 複選框下拉列表
- 16. 複選框頂部下拉
- 17. 複選框在下拉
- 18. 語義UI下拉選擇多個選項後不會清除文本
- 19. 複選框內聯下拉選項
- 20. 禁用多選複選框當我有選擇下拉列表
- 21. 根據下拉選中複選框
- 22. 組合框與複選框的下拉
- 23. 下拉多選複選標記切換
- 24. 語義UI動態下拉
- 25. 語義UI下拉測試
- 26. 語義UI下拉大小
- 27. 硒的webdriver(2.0) - 多選擇[複選框]下拉菜單 -
- 28. jquery ui可選複選框
- 29. 添加下拉框和複選框值
- 30. 綁定複選框或在AngularJS中多選下拉到數組?
我試過語義用戶界面,但我還沒有發現在回答 –