javascript - 在 React 和 React-bootstrap 的编辑表单中使用多个复选框

Question

我正在显示 4 个复选框 (this.state.people)。将两个已选中的复选框 (this.state.peopleChecked) 加载到编辑表单中。问题是这两个复选框始终被标记，无法取消选中。如果我选中一个复选框，则一个对象(其 id)将转到 selectPeopleId 数组，如果是两个，则两个(id)将转到该数组。

此处代码:https://stackblitz.com/edit/react-hwabiy?file=index.js

class App extends Component {
  constructor() {
    super();
    this.state = {
      people: [
        {
          'firstname': "Paul",
          'id': "1"
        },
         {
          'firstname': "Martin",
          'id': "2"
        },
         {
          'firstname': "Joseph",
          'id': "3"
        },
         {
          'firstname': "Gregor",
          'id': "4"
        }
      ],
       peopleChecked: [
         {
          'firstname': "Martin",
          'id': "2"
        },
         {
          'firstname': "Gregor",
          'id': "4"
        }
      ],
      selectPeopleId: []
    }
  }



  handleSelect = (person) => {
    const newArray = this.state.peopleChecked.filter(item => item.id !== person.id);

    this.setState({
      selectPeopleId: person.id,
      peopleChecked: newArray
    })
  }


  render() {
    return (
      <div>
        {this.state.people.map(person => (
          <div key={person.id} className="mb-1">
            <Form.Check 
              type={'checkbox'}
              id={person.id}
              label={person.firstname}
              checked={this.state.peopleChecked.some(({ id}) => id === person.id)}
              onChange = {() => this.handleSelect(person)}
            />
          </div>
        ))}
      </div>
    );
  }
}

Answer 1

当你这样做时，

selectPeopleId: person.id,

每次复选框状态发生变化时，您的 selectPeopleId 将只有最新的 id，即最后一次点击的。

你可以做到这一点，

handleSelect = (person) => {

  //Check if clicked checkbox is already selected
  var found = this.state.peopleChecked.find((element) => {
    return element.id == person.id;
  });

  if(found){
    //If clicked checkbox already selected then remove that from peopleChecked array
    this.setState({
      peopleChecked: this.state.peopleChecked.filter(element => element.id !== person.id),
      selectPeopleId: this.state.selectPeopleId.filter(element => element !== person.id)
    }, () => console.log(this.state.peopleChecked))
  }else{
    //If clicked checkbox is not already selected then add that in peopleChecked array
    this.setState({
      selectPeopleId: [...this.state.selectPeopleId, person.id],
      peopleChecked: [...this.state.peopleChecked,person]
    }, () => console.log(this.state.selectPeopleId))
  }
}

注意:您不会在 selectPeopleId< 中获得预选(来自 peopleChecked 数组)复选框的 id/ 数组。由于最初选择了 2 个复选框，因此当您选择另一个复选框时，您的 selectPeopleId 数组仅包含 1 个值，但 peopleChecked 数组包含 3 个对象(最初选择了 2 个)。

您可以避免 selectPeopleId 数组，而只使用 peopleChecked 数组。

Demo (使用简单输入)