我正在寻找一些具有多选复选框和全选选项功能的 React 组件,我可以看到很少的组件,但它没有全选内置功能。有什么指示吗?
基本上你需要使用受控的
value
和onChange
道具。以及您的复选框上的OnChange
一个。
以下一种方法:
import React, { Component } from "react";
import ReactDOM from "react-dom";
import Select from "react-select";
import "./styles.css";
const options = [
{ label: "Option 1", value: 1 },
{ label: "Option 2", value: 2 },
{ label: "Option 3", value: 3 },
{ label: "Option 4", value: 4 },
{ label: "Option 5", value: 5 },
{ label: "Option 6", value: 6 },
{ label: "Option 7", value: 7 }
];
class App extends Component {
constructor(props) {
super(props);
this.state = {
checked: false,
values: []
};
}
onChangeCheckbox = e => {
const isChecked = !this.state.checked;
this.setState({
checked: isChecked,
values: isChecked ? options : this.state.values
});
};
onChange = opt => {
const allOptionsSelected = opt.length === options.length;
this.setState({
checked: allOptionsSelected ? true : false,
values: opt
});
};
render() {
return (
<div className="App">
<Select
isMulti
onChange={this.onChange}
options={options}
value={this.state.values}
/>
<p>
<input
onChange={this.onChangeCheckbox}
type="checkbox"
id="selectAll"
value="selectAll"
checked={this.state.checked}
/>
<label for="selectAll">Select all</label>
</p>
</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
这里有一个活生生的例子.