Question

抱歉，我仍然是新手，以防万一有人希望看到我要嵌入的代码是整个代码Gist

无论如何，我正在使用列表A中的复选框设置setState，因此一种方法可以过滤列表B中的项目，并仅显示与ObjectID相关联的项目。

我不确定checkboxes的状态设置是否正确，或者我的方法是否运行不正确。

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

onBox的onChange对许多用户来说都是有问题的。看到这个： React Checkbox not sending onChange

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

Answer 2

我设法使用ReactBootstrap来捕获CheckBox的onChange事件。

我的index.html

<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="author" content="Binyamin (Benny) Regev">
    <meta name="course" content="Web Dev App - July 2019">
    <meta name="meeting" content="31 React Summary Exercise">
    <title>Todos List App</title>

    <!-- React -->
    <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


    <!-- Axios (used for AJAX calls) -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <link rel="stylesheet" href="style.css">
</head>

<body>
<div id="root"></div>

<!-- React-Bootstrap -->
<script src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js" crossorigin></script>
<!-- Local JS/JSX -->
<script type="text/babel" src="App.js"></script>
</body>

</html>

我的 app.js -仅相关的代码片段（app.js不包含任何导入）

class FormTodos extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      todos: [],
      newTask: '',
      show: false,
      nextIndex: 1,
    }
    this.onCheckBoxChanged = this.onCheckBoxChanged.bind(this);
  }

  onCheckBoxChanged(event) {
    // Just to show an indication that I got in the function
    console.log("onCheckBoxClick(event) --> ElementId = " + event.currentTarget.id);
  }

  render() {
    // Your code goes here :-)

    return (
      <div>
        <ReactBootstrap.Form.Check type='checkbox' id='check-api-checkbox' className="mb-2" size='lg'>


          <ReactBootstrap.Col lg='1'>
            <ReactBootstrap.InputGroup.Checkbox id={`checkbox${todo.id}`}
              style={styleCheckBox} checked={!todo.isActive}
              todoId={todo.id} label={todo.text} aria-label={todo.text}
              onChange={(item) => this.onCheckBoxChanged(item)}
              isActive={todo.isActive} />
          </ReactBootstrap.Col>

        </ReactBootstrap.Form.Check>
      </div>
    );
  }
}

注意到onChange={(item) => this.onCheckBoxChanged(item)}吗？

我希望这会有所帮助。

Answer 3

因此，对于为什么它不起作用（必须有一个朋友来帮助我重写该方法），这最终变得更加复杂，部分原因是由于我如何设置数据库来从中提取关联（lodash必须参与进来。）

但是重新勾选复选框，以防万一有人在寻找复选框并在将来说明帮助时认为有效的方法：

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

                            />
                              {item.name}
                   </ListItem>
                ))}
            </div>

对于其余方法问题，如果有人真正感兴趣，我将在第一篇文章中更新要点。

复选框以更改状态和过滤器列表

3 个答案: