javascript - 更改状态和过滤器列表的复选框

Question

抱歉，我在这方面还是个新手，以防万一有人想看我忽略嵌入这里的代码是整个代码 Gist

无论如何，我正在使用列表 A 中的复选框来设置状态，这样一个方法就可以从列表 B 中过滤项目，并且只显示那些与 ObjectID 关联的项目。

我不确定我的复选框是否没有正确设置状态，或者我的方法是否工作不正常。

class Home extends React.Component {
    state = {   
        conditions: [],
        symptoms: [],
        selectedSymptom: []
    }
    componentDidMount() {
        this.getConditionsMethod();
        this.getSymptomsMethod();
    }

    getConditionsMethod = () => {
        API.getConditions()
            .then(data => {
                console.log(data);
                data.data.sort((a, b) => a.name.localeCompare(b.name))
                this.setState({
                    conditions: data.data
                })
            })
            .catch(err => console.log(err))
    };

    getSymptomsMethod = () => {
      API.getSymptoms()
            .then(data => {
                console.log(data);
                data.data.sort((a, b) => a.name.localeCompare(b.name));
                this.setState({
                    symptoms: data.data
                })
            })
            .catch(err => console.log(err))
    };

    filterConditionsMethod = () => {
        API.getConditions()
            .then(data => {
                console.log(data);
                data.data.sort((a, b) => a.name.localeCompare(b.name));
                data.data.filter(condition => !condition.symptoms.includes(this.state.selectedSymptom || this.state.selectedSymptom.length))
                this.setState({
                    selectedSymptom: data.data
                })
            })
            .catch(err => console.log(err))
    };

晚些时候回来

<div className="doubleCol">
    {this.state.symptoms.map(item => (
    <ListItem key={item.ObjectID}>
        <input name="slector"
               type="checkbox"
               className="sympSelect"
               onClick={() => this.setState({ selectedSymptom: true })}
        />
        {item.name}
    </ListItem>
    ))}
</div>

我花了 2 周的时间来构建这个应用程序，并且在过去的 2 天里一直停留在这个过滤上。我需要在明天下午之前获得此应用程序 MVP，以便在应届毕业生就业事件中进行演示，这是仅剩的两件事之一。

我没有足够的代表获得赏金，但感谢任何帮助或建议

Answer 1

复选框上的 onChange 对许多用户来说一直是个问题。看到这个: React Checkbox not sending onChange

在此线程上，您会发现有人建议使用 onClick 或其他一些方法来实现此功能。我本可以将其添加为评论，但我没有 50 的声誉:(