在 React 中显示开关值

Posted 2023-02-22

【中文标题】在 React 中显示开关值

【英文标题】：Displaying Switch Value in React

【发布时间】：2020-10-20 16:34:41

【问题描述】：

我的反应应用程序中有一个非常简单的问题。如果为真，我需要打开开关值，否则为假。我已经将值初始化为 true，但开关仍处于关闭状态。

请检查此代码沙箱链接

CLICK THIS

<Grid item xs="12" md="6">
  <FormControlLabel
    name="buy"
    variant="outlined"
    value="values.buy"
    onChange="handleChange"
    onBlur="handleBlur"
    control="<Switch"
    color="primary"
  /> label="Triage?" labelPlacement="end" style= display: "flex",
  justifyContent: "flex-end"  />
</Grid>

【问题讨论】：

那不是checked属性负责切换状态吗？

【参考方案1】：

你必须使用checked属性

...
<Switch checked=values.buy color="primary" />

更新

准确地说：在传递Switch 控件的地方添加checked。所有其他代码都不应被触及

... your code
control=<Switch checked=values.buy color="primary" />
... your code

【讨论】：

其他属性怎么样？价值=values.buy onChange=handleChange onBlur=handleBlur。我应该将它们转移到 中吗？

@Robert ：只需在当前代码中将 value 更改为 checked

【参考方案2】：

开关的开/关状态由“checked”属性控制。您可以在 FormControlLabel 和 Switch 组件中设置它。

这是在 FormControlLabel 中设置它的代码：

<Grid item xs=12 md=6>
                <FormControlLabel
                  name="buy"
                  variant="outlined"
                  value=values.buy
                  checked=values.buy
                  onChange=handleChange
                  onBlur=handleBlur
                  control=<Switch color="primary" />
                  label="Triage?"
                  labelPlacement="end"
                  style= display: "flex", justifyContent: "flex-end" 
                />
              </Grid>

这是第二个选项，在 Switch 中设置：

<Grid item xs=12 md=6>
                <FormControlLabel
                  name="buy"
                  variant="outlined"
                  value=values.buy
                  onChange=handleChange
                  onBlur=handleBlur
                  control=<Switch color="primary" checked=values.buy />
                  label="Triage?"
                  labelPlacement="end"
                  style= display: "flex", justifyContent: "flex-end" 
                />
              </Grid>

两者似乎都可以正常工作。