reactjs - 更改组件的 Prop onClick

Question

我刚开始使用react并试图实现某些目标，但不知道如何让它发挥作用。这是我的代码:

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 我会更新状态并仅更改所选组件的 Prop ，但我不知道如何在 onSelect 函数中访问该组件。如果我可以直接更改组件的 Prop ，我就不会。

谢谢你。

Answer 1

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

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>)
  }

}

然后你可以像 child 一样调用 onSelect 函数

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

如果您只想要一个 Checkbox要一次选择，您应该使用 Radio反而。但是，在这种情况下，您的任务更加简单，因为您只需要存储 selectedValue作为字符串而不是数组