reactjs-handle复选框(多个)单击事件

我有一个组件,它显示键列表,每个键都有一个附加到字符串的复选框。另外,我还有一个按钮,可以调用一个API,选择所有键并删除这些键。

我正在努力实现以下几点:

1. 选中复选框将启用“删除”按钮
2. 点击delete按钮应该发送一个POST到API,然后重新加载列表
3. 由于列表被重新加载,所有复选框都应该被取消选中,因此删除按钮再次被禁用
4. 在这个函数之外还有一个按钮可以检查列表的长度,如果我在组件中获取列表,我不知道如何将它与这个列表相关联。

我面临的问题是,我不知道如何使按钮和复选框相互关联。我试着用一个 checked 状态,这是一个布尔值,但这只是一个布尔值,不能记录多个键。我觉得用数组行吗?我不知道如何正确地附加或删除选中的键。

我的代码看起来像

class AppList extends Component {
    constructor() {
        super();
        this.state = {
            checked: [],
            apps: []
        };
        this.handleChecked = this.handleChecked.bind(this);
    }


    componentDidMount() {
        fetch("some_url", {
            method: 'post',
            body: JSON.stringify({"user": "some_email"}),
            headers: {'Content-Type': ' application/json'}
        })
        .then(res => res.json())
        .then(
            (result) => {
                this.setState({apps: JSON.parse(result)});
            },
            (error) => {
                console.log("error", error);
            }
        );
    }

    handleDeleteKey = (event) => {
        // fetch(I'll worry about this later)
        this.setState({checked: false});
        console.log("delete!!!!");
    }

    handleChecked () {
        this.setState({checked: !this.state.checked});
    }


    render () {
        const apps = this.state.apps.map((app) =>
            <div>
                <input type="checkbox" onChange={this.handleChecked} />
                {`   ${app}`}
            </div>
        );

        return (
            <div>
                <h4>Client Key List:</h4>
                {this.state.apps.length > 0 ? <ul>{apps}</ul> : <p>No Key</p>}
                {this.state.apps.length > 0 ? <button className="api-instruction-button" onClick={this.handleDeleteKey}>Delete Selected Key(s)</button> : null}
            </div> 
        );
    }


} 

export default AppList;

我觉得我的设计是完全错误的,但我不知道如何修复它。似乎要传递的状态太多了,没有什么是最外层的,几乎是循环依赖。

有人有处理这个问题的经验吗?这似乎是一个常见的用户行为,但我想不通。

编辑:再挖一点,好像我需要打电话 componentDidMount 外面的 AppList . 它应该在使用 ,我们称之为 MainApp .

主控制程序 组件安装 和我的一样 申请者 . 在里面的那个 申请者 被移除,键作为道具传递给AppList。

我无法处理点击事件。组件似乎总是在更新,所以如果我想将clicked键附加到数组中,它就不起作用了。同样的电话会一次又一次地打。

因为里面还有一个按钮 主控制程序 那需要钥匙清单,我不能把电话传给 . 但是,在 申请者 应该更新 主控制程序 也。它是如何工作的?我很困惑

https://codesandbox.io/s/7w2w11477j

这个娱乐活动应该包含我目前为止的所有功能,但我不能让它们一起工作。

• 我有一个字符串列表,每个字符串都有一个复选框
• 有一个按钮,我可以点击删除我的数据库中的这些条目调用一个API