Reactjs 单击后更改组件的道具

我是一个新的反应和尝试实现一些东西，但不知道如何让它工作。这是我的密码：

import React from "react";
import CheckBox from "./CheckBox";

class MainContainer extends React.Component {
    constructor(props) {
    super(props);
    this.state = {};
    this.onSelect= this.onSelect.bind(this);
    };
    onSelect(selected) {
     //change props only for the clicked checkbox and update state
    }
    render(){
     return (<div> 
               <CheckBox 
                label="Label"
                count="60"
                stateGroup="department"
                ticked={false}
                onClick = {this.onSelect}
              />
               <CheckBox 
                label="Label"
                count="60"
                stateGroup="language"
                ticked={false}
                onClick = {this.onSelect}
              />
            </div>)
  }

}

所以，我有一个容器MainContainer，里面有CheckBox组件，我想把我的状态保持在一个地方，即MainContainer状态。我想做的是onSelect，我会更新状态并只更改所选组件的道具，但我不知道如何在onSelect函数中访问该组件。我不知道我是否可以直接改变一个组件的道具

---

谢谢。

首先，您需要设置初始状态，然后单击按钮更改该状态

import React from "react";
import CheckBox from "./CheckBox";

class MainContainer extends React.Component {
 constructor(props) {
   super(props);
   this.state = {
     checked: false,
   };
   this.onSelect= this.onSelect.bind(this);
 };

 onSelect(selected) {
   this.setState({checked: selected}) // or maybe: selected.target.value
 }

 render(){
    return (
       <div> 
           <CheckBox 
            label="Label"
            count="60"
            stateGroup="department"
            ticked={false}
            onClick = {this.onSelect}
          />
           <CheckBox 
            label="Label"
            count="60"
            stateGroup="language"
            ticked={false}
            onClick = {this.onSelect}
          />
      </div>)
 }

}

---

根据您的描述，您似乎希望能够选择，而不必将每个复选框的映射存储在状态中。您可以做的是，如果希望能够选择多个复选框，请在状态数组中保留选定项的数组

class MainContainer extends React.Component {
    constructor(props) {
    super(props);
    this.state = { selectedValues: []};
    this.onSelect= this.onSelect.bind(this);
    };
    onSelect(selected, checked) {
     //change props only for the clicked checkbox and update state
     if(checked) {
         //if the checkbox is check append id to the selected state array
         this.setState((prevState) => ({
              selectedValues: prevState.selectedValues.concat(selected);
         }))
     } else {
         //remove the value from state is its unchecked
         let selectedValues = [...this.state.selectedValues];
         const index = selectedValues.indexOf(selected);
         if(index > -1) {
             selectedValues = [...selectedValues.slice(0, index), ...selectedValues.slice(index + 1)];
         }
         this.setState({selectedValues});
     }
    }
    render(){
     return (<div> 
               <CheckBox 
                label="Label"
                count="60"
                stateGroup="department"
                ticked={this.state.selectedValues.indexOf("department") > -1}
                onClick = {this.onSelect}
              />
               <CheckBox 
                label="Label"
                count="60"
                stateGroup="language"
                ticked={this.state.selectedValues.indexOf("language") > -1}
                onClick = {this.onSelect}
              />
            </div>)
  }

}

---

如果您一次只想选中一个复选框，您应该使用收音机。但是，在这种情况下，您的任务更简单，因为您只需要将selectedValue存储为字符串而不是数组

首先，道具无法更改或更新，这就是状态的作用，为了让您能够随意更新UI，如果我没有错，您可以使用状态。谢谢您的回复。我也这么认为。我只是想确定我说的对。谢谢你的回复。我的问题是，我将有大约15个复选框。从您的回复中我了解到，我需要将每个复选框映射到状态中的属性，以便能够单独控制每个复选框。即使这样，我的问题仍然是如何知道哪个复选框被点击以更新其状态

this.props.onClick(this.props.stateGroup, checkedState);