Question

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

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

我要实现的几项目标：

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

我遇到的问题是我不知道如何使按钮和复选框相互关联。我尝试使用带有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中的相同。 AppList中的一个被删除，并且密钥作为道具传递给AppList。

我无法处理点击事件。似乎该组件一直在更新，因此如果我想将单击的键附加到数组上，它将无法正常工作。将会一次又一次地拨打相同的电话。

由于MainApp中还有另一个按钮需要键列表，因此我不能只是将通话转接到AppList中。但是，在AppList中进行更新也应同时更新MainApp。它是如何工作的？我很困惑

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

此娱乐活动应该包含我到目前为止拥有的所有功能，但是我无法让它们一起工作。

同样，我的任务很简单：

我有一个字符串列表，每个字符串都有一个复选框
选中复选框以选择特定的字符串
有一个按钮可以单击以通过调用API删除数据库中的这些条目
在这种情况下是否需要刷新MainApp？否则，我需要删除前端的字符串，以便在按下删除按钮后它们不会显示

Answer 1

我相信这是您要去的地方：https://codesandbox.io/s/w23wv002yw

使您的笔记本无法正常工作的唯一问题是，您只是对放置所有内容的位置有些混乱。

内容：

MainApp.js仅包含apps以及在后端删除它们的方法。除了这两种方法，MainApp.js文件没有其他真正的问题。

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

过程：

首先，MainApp.js将使用后端api pull加载并重新安装，并填充其apps状态。完成后，它将传递给AppList.js。从AppList.js开始，该列表将在屏幕上显示为多选字段。然后，用户可以选择或取消选择任何选项。选择一个选项后，其索引将推入checked状态并按升序进行组织。

（排序数组不是必需的，但我认为如果您想在以后的某个时间对其进行重新组装，这将有所帮助）

选择一个或多个选项时，将显示一个delete按钮。当用户单击delete按钮时，AppList.js将调用从delete传递给它的MainApp.js函数，然后它将清除当前的checked状态。 / p>

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

1 个答案: