当它的值为真时，我需要设置复选框答案

【问题标题】：I need to set checkbox checked when its value is true当它的值为真时，我需要设置复选框
【发布时间】：2021-05-29 08:17:48
【问题描述】：

我需要进行设置，例如复选框的值是否为真，然后复选框显示选中如果值为假复选框被选中，但它的值从后端变为真发生了什么我将值存储在状态规则中，但是它没有启用，如果值变为真，当值为真时，我无法检查和未选中复选框复选框不检查值何时为真为什么它会发生不确定我也在尝试设置 onChange，但对如何设置感到困惑改变

来自后端的价值

exactMatch: true
Match: true

useRule 组件

const [rules, setRules] = useState([]);
const fetchSearch = (data) => {
    axios
      .get(API_ENDPOINTS.SEARCH_UPDATE, data)
      .then((response) => setRules(response.data))
      .catch((err) => {
        console.log("error", err);
      });
  };

SearchRuleForm 组件

export default function SearchForm() {

const { setRules, rules, fetchSearch } = useRule();
React.useEffect(() => {
    fetchSearchRule();
  }, []);

const handleCheckBoxChange = (e) => {
    setRules({
      ...rules,
      [e.target.name]: !rules[e.target.name]
    });
  };

 return (
 <Grid item xs={4}>
          <Box className={classes.formText}>
            <Checkbox
              name="exactMatch"
              checked={rules.exactMatch}
              color="primary"
              onChange={handleCheckBoxChange}
            />
            <Typography variant="subtitle2" noWrap={true}>
              Match
            </Typography>
          </Box>
        </Grid>
        
)
}

【问题讨论】：

请使用标点符号！

标签： javascript reactjs

【解决方案1】：

我不确定我是否理解您的问题，我相信您目前无法配置您的 onChange 功能。此功能应该可以解决您的问题

const handleCheckBoxChange = (e) => {
    setRules({
      ...rules,
      [e.target.name]: !rules[e.target.name]
    });
  };

编辑： Here's a codesandbox that I tried the solution on

【讨论】：

你把 useState 导入组件了吗？
如果您还可以附上错误的代码sn-p会有所帮助

【解决方案2】：

像这样实现handleCheckBoxChange函数：

const handleCheckBoxChange = (e) => {
    setRules((prevRules) => ({
      ...prevRules,
      [e.target.name]: !prevRules[e.target.name],
    }));
  };

【讨论】：