Question

我有一个待办事项列表。其结构如下：主要＆gt;列表＆gt; listItem（Main是List的父级，依此类推）。

现在，每个listItem都有一个用户可以标记的复选框。标记几个项目后，用户可以单击“删除标记的项目”（让我们称之为multiRemove），我希望我的应用程序遍历标记的listItems并删除相关项目。

我的一个解决方案是在主要组件中有一个项目列表，每次与UI的交互都会相应地更改列表。

是否有可能以另一种方式实现这一目标？

**注意：**我没有使用FLUX（或其实现）。

非常感谢。

Answer 1

这可能会有所帮助。 https://facebook.github.io/react/docs/two-way-binding-helpers.html

var FieldCheckbox = React.createClass({
getInitialState: function(){
    var checked = true;
    return {isChecked: checked};
},
check: function(elementId, event){
    var checked = true;
    if(this.state.isChecked){
        // Apply your logic
        checked = false
    }
    else{
        // Something else
    }
    this.setState({isChecked: checked});
},
render: function() {
    return(
        <label>
            <Input type='checkbox' checked={this.state.isChecked} onClick={this.check.bind(null, this.props._type)} label={this.props._type} />
        </label>
    );
}
});

这是默认情况下保持复选框为true。我必须自己编写onClick逻辑的原因是因为，我已经尝试过反应并且它没有解开。我反过来做了，事情很顺利。

Answer 2

一个好的经验法则是保持尽可能少的组件保持应用程序状态。你的大多数组件应该是“哑巴”。您可以通过复选框的状态和任何处理程序作为道具。

Answer 3

您可以在复选框中添加处理程序，以便将结果isChecked保存在组件状态中。然后，您的列表组件可以访问其子节点的每个状态，以查看它是否将被删除。

如何访问ReactJS中的已检查元素？

3 个答案: