react 는 콤 보 상자 의 전체 선택 과 반 선택 구성 요소 효 과 를 실현 합 니 다.
실행 효과 그림 은 다음 과 같 습 니 다:
코드:
import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
// import Menu from '../menu/Menu.jsx';
class List extends Component {
constructor () {
super();
this.state = {
title: ' List ',
content: ' ',
chooseAll: false, //
inters: ['bsball', 'ymball', 'fbball'], //
intersAll: ['bsball', 'ymball', 'ppball', 'fbball'],
fchoose: false //
};
}
//
chooseAll (event) {
let {checked, value} = event.target;
let chooseAll = this.state.inters.length === 4 ? true : false;
let inters = ['bsball', 'ymball', 'ppball', 'fbball'];
checked ? (
this.setState({
inters,
chooseAll: checked
})
) : (
this.setState({
inters: [],
chooseAll: checked
})
);
}
//
chooseInter (event) {
let val = event.target.value;
let checked = event.target.checked;
let {inters} = this.state;
// event.stopPropagation();
//
if (checked && !this.state.inters.includes(val)) {
inters.push(val);
} else {
//
inters = inters.filter(v => val !== v);
}
let chooseAll = inters.length === 4 ? true : false;
console.log(inters);
this.setState({
inters,
chooseAll
});
}
//
fchooseHandle (event) {
let {checked, value} = event.target;
let {inters, intersAll} = this.state;
let chooseAll = this.state.inters.length === 4 ? true : false;
let arr = []; //
this.setState({
fchoose: checked,
chooseAll
});
intersAll.forEach(item => {
if (!inters.includes(item)) {
arr.push(item);
}
});
this.setState({
inters: arr
});
}
componentWillMount () {
let chooseAll = this.state.inters.length === 4 ? true : false;
this.setState({
chooseAll
});
}
render () {
return (
<div className="list">
{/* <Menu /> */}
<h1>{this.state.title}</h1>
<p>{this.state.content}</p>
<p>
<label>
<input type="checkbox" value="bsball" checked={this.state.fchoose} onClick={this.fchooseHandle.bind(this)}/>{this.state.fchoose ? ' ' : ' '}
</label>
<label>
<input type="checkbox" value="bsball" checked={this.state.chooseAll} onClick={this.chooseAll.bind(this)}/>{this.state.chooseAll ? ' ' : ' '}
</label>
</p>
<p>
<label>
<input type="checkbox" value="bsball" checked={this.state.inters.includes('bsball')} onClick={this.chooseInter.bind(this)}/>
</label>
<label>
<input type="checkbox" value="ymball" checked={this.state.inters.includes('ymball')} onClick={this.chooseInter.bind(this)}/>
</label>
<label>
<input type="checkbox" value="ppball" checked={this.state.inters.includes('ppball')} onClick={this.chooseInter.bind(this)}/>
</label>
<label>
<input type="checkbox" value="fbball" checked={this.state.inters.includes('fbball')} onClick={this.chooseInter.bind(this)}/>
</label>
</p>
</div>
);
}
}
export default withRouter(List);
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
nginx 에서 사이트 아이콘 표시 설정전단 개발 환경: react:^16.4.1 webpack:^4.16.0 웹 팩 에 favicon. ico 설정 추가: nginx 는 ico 에 대한 지원 을 추가 합 니 다:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.