我可能会将您的状态设置为包含一个对象数组（代表您的复选框）和一个代表过滤器的字符串。每个复选框对象将包含两个属性，即标签的文本和复选框的值。
对于初始状态，您希望此数组为空，然后在
componentDidMount生命周期内执行API调用，并将状态设置为包括收到的信息。
constructor(props) { super(props); this.state = { checkboxes: [], filter: 'ALL' }; //each checkbox would take the form of {label: 'some label', checked: true}}componentDidMount() { getData(response => { //some API call this.setState({ checkboxes: response.body }); });}为了使您的组件呈现这些复选框，它需要了解处于状态的复选框对象与实际DOM元素的关系。您可以创建一个辅助函数
.map来实现此目的。您还可以利用
.filter将过滤器应用于状态中的每个对象，并摆脱与过滤器不匹配的对象。
function renderCheckboxes() { const {checkboxes, filter} = this.state; return checkboxes .filter(checkbox => filter === 'ALL' || filter === 'CHECKED' && checkbox.checked || filter === 'UNCHECKED' && !checkbox.checked ) .map((checkbox, index) => <div> <label> <input type="checkbox" checked={checkbox.checked} onChange={toggleCheckbox.bind(this, index)} /> {checkbox.label} </label> </div> );}注意每个复选框如何将onChange属性映射到某个函数？您需要将其提供给使用该
checked属性呈现的每个复选框，因为您将创建一个Controlled
Component，并且您的状态将控制是否检查每个单独的组件。您的
toggleCheckbox函数可能看起来像这样：
function toggleCheckbox(index) { const {checkboxes} = this.state; checkboxes[index].checked = !checkboxes[index].checked; this.setState({ checkboxes });}创建将过滤器设置为其他字符串的函数可能也很有用：
function updateFilter(filter) { this.setState({ filter });}最后，您可以在函数中使用以下功能
render来显示复选框以及用于更新过滤器状态的链接（我还添加了一些不间断的空格来分隔每个过滤器链接）：
render() { return ( <div> {renderCheckboxes.call(this)} <div> <h4>Filters ({this.state.filter})</h4> <a href="#" onClick={updateFilter.bind(this, 'ALL')}>ALL</a> | <a href="#" onClick={updateFilter.bind(this, 'CHECKED')}>CHECKED</a> | <a href="#" onClick={updateFilter.bind(this, 'UNCHECKED')}>UNCHECKED</a> </div> </div> );}这是此工作的示例-减去API调用：
https://jsbin.com/bageyudaqe/edit?js，输出
希望这可以帮助！
