当它的值为真时，我需要将复选框设置为启用

Question

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

来自后端的价值

NameMatch: true
Match: true

SearchForm 组件

export default function SearchForm() {

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

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

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

Answer 1

如果我正确理解了这个问题，那么您是在问 onChange 函数究竟应该做什么。所以基本上你需要切换复选框所依赖的属性值。例如，如果后端返回：

exactNameMatch: true
partialNameMatch: true

那么对于第一个复选框，当它被点击时，exactNameMatch的值应该设置为false。示例实现如下所示：

onChange={(e) => setRules((prevRules) => ({...prevRules, exactNameMatch: !prevRules.exactNameMatch}))}

对于第二个复选框，onChange 将是相同的，只是略有不同，您将使用 partialNameMatch 代替 exactNameMatch。。 p>

另一种可能性是像这样实现 handleCheckBoxChange 函数：

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

其中 e.target.name 分别是 exactNameMatch 或 partialNameMatch，具体取决于您传递给 Checkbox 组件的名称属性的值。希望我能够正确理解您的问题并真正帮助您！