时间戳

首页 > 解决方案 > reactjs - 处理复选框（多个）单击事件

reactjs - reactjs - 处理复选框（多个）单击事件

问题描述

我知道有一些类似的主题，但似乎没有一个与我尝试做的方向相同，因此是一个新线程。

我有一个显示键列表的组件，每个键都有一个附加到字符串的复选框。此外，我有一个按钮，据说它调用一个 API 并选择了所有键并删除这些键。

我想要实现的几件事：

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

我面临的问题是我不知道如何使按钮和复选框相互关联。我尝试将 state 与 state 一起使用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. 它应该在使用的组件中AppList，我们称之为它MainApp。

MainApp调用componentDidMount与AppList. 一个 inAppList被删除，键作为道具传递给 AppList。

我无法处理点击事件。似乎组件总是在更新，所以如果我想将点击的键附加到数组中，它就行不通了。将一次又一次地发出相同的呼叫。

由于其中还有另一个按钮MainApp需要键列表，因此我不能只将调用传递给AppList. 但是，更新AppList也应该更新MainApp。它是如何工作的？我很混乱

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

这个游戏应该包含我目前拥有的所有功能，但我无法让它们一起工作。

我的任务很简单：

标签： reactjs

解决方案

这就是我相信你想要的：https ://codesandbox.io/s/w23wv002yw

使您无法正常工作的唯一问题是您只是在放置所有东西的地方有点混乱。

内容：

将MainApp.js仅包含apps和 用于在后端删除它们的方法。除了这两种方法之外，没有其他真正与MainApp.js文件有关的内容。

将AppList.js包含更新其自身checked状态的所有方法、删除按钮本身以及checked在删除时清除状态的方法。

流程：

首先，MainApp.js将使用后端 api pull 加载和重新安装并填充其apps状态。完成后，它将传递给AppList.js. 从那里，AppList.js将该列表呈现为屏幕上的多选字段。然后用户可以选择或取消选择任何选项。当一个选项被选中时，它的索引被推送到checked状态并按升序组织。

（订购阵列并不是那么必要，但我认为如果您想在以后的某个时候对其进行重新装备，这会有所帮助）

When one or more option is selected, a deletebutton will appear. 当用户单击delete按钮时，AppList.js将调用从delete传递给它的函数MainApp.js，然后将清除当前checked状态。

推荐阅读