开发者问题收集

ReactJS：来自 State 的动态复选框

2016-06-28
22392
reactjs

我有一个动态元素集合，因此我事先不知道集合的内容是什么。我想动态呈现这些复选框，并默认选中它们。您应该能够取消选中这些框，这会触发渲染中的另一个映射函数。（所以基本上是我的过滤器）

我在状态设置上遇到了困难。 我正在考虑以下内容，我想通过 API 调用在 ComponentWillMount 期间设置 initialState： 

scenario 1 (arrays): 

this.state {
    checkboxes: [value1, value2, value3],
    checkedcheckboxes: [value1, value2]
}

然后我可以使用 react.addons.update 函数来更改 checkcheckboxes 状态。缺点是，在渲染我的复选框期间，我必须循环遍历 checkcheckboxes 数组，每个复选框上都有 indexOf，以查看是否应该选中它。 

scenario 2 (object):

this.state {
    checkboxes: {
       value1: true,
       value2: true,
       value3: false
}

这样我就有了动态键，这使得工作变得更加困难（我猜），因为我必须在 setState 中使用计算字段。我也以为这会对我的表现产生负面影响。

这种模式有没有最佳实践？

谢谢！

1个回答

我可能会将您的状态设置为包含一个对象数组（表示您的复选框）和一个表示您的过滤器的字符串。每个复选框对象将包含两个属性，即标签的文本和复选框的值。

对于您的初始状态，您希望此数组为空，然后在 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 属性呈现的每个复选框，因为您将创建一个 受控组件 ，并且您的状态将控制是否检查每个单独的组件。您的 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>
                &nbsp;|&nbsp;
                <a href="#" onClick={updateFilter.bind(this, 'CHECKED')}>CHECKED</a>
                &nbsp;|&nbsp;
                <a href="#" onClick={updateFilter.bind(this, 'UNCHECKED')}>UNCHECKED</a>
            </div>
        </div>
    );
}

这是一个工作示例 - 减去 API 调用：

https://jsbin.com/bageyudaqe/edit?js,output

希望这对您有帮助！

Michael Parker
2016-06-28