最近接觸了一些項目,發現開發的時候各類各樣的setState,若是不注意場合的去使用,會形成沒必要要的更新,有可能會產生一些bug。因此明確一個組件的狀態到底受不受本身控制很重要。react
import React from 'react';
/** * checkboxList * - props * - values 選中的項目 * - list 顯示的數據 * - onChange 狀態變化時候的回調 */
class CheckboxList extends React.Component {
state = {
checkedList: [],
}
getCheckedList = (values, item) => {
if (values.includes(item)) {
return values.filter(d => d !== item).filter(Boolean);
} else {
return [...values, item].filter(Boolean);
}
}
_checkHandle = (item) => {
if (this.props.values) {
const propsSelectedList = this.getCheckedList(this.props.values, item);
this.props.onChange && this.props.onChange(propsSelectedList);
} else {
const checkedList = this.getCheckedList(this.state.checkedList, item);
this.setState({
checkedList: checkedList
}, () => {
this.props.onChange && this.props.onChange(checkedList);
});
}
};
render() {
const list = this.props.list
const checkedList = this.props.values || this.state.checkedList;
let verifyInclude = d => checkedList.includes(d);
return (
<ul>
{list.map(d => {
return (
<li key={d.value}>
<label name={'check'} style={{ cursor: 'pointer' }}>
<input
type="checkbox"
checked={verifyInclude(d)}
value={d.value}
onChange={this._checkHandle.bind(this, d)} />
{d.label}
</label>
</li>
)
})}
</ul>
)
}
}
export default class Component extends React.Component {
state = {
values: [],
}
checkboxChangedHandle = (checkedList) => {
this.setState({
values: checkedList,
})
}
list = [
'aa', 'bb', 'cc', 'dd'
].map((d, i) => {
return {
label: d,
value: i
};
});
render() {
return (
<div style={{ border: '1px solid', width: '200px', height: '200px' }}>
<CheckboxList
list={this.list}
values={this.state.values}
onChange={this.checkboxChangedHandle} />
</div>
)
}
}
複製代碼