Question

我是新手做出反应并尝试实现某些目标，但却不知道如何让它发挥作用。这是我的代码：

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函数中访问该组件。如果我可以直接更改组件的道具，我就不会这样做。

谢谢。

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

}

然后你可以从像

这样的孩子调用onSelect函数

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

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

Answer 2

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

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

}

更改组件的道具onClick

2 个答案: