在 React 中显示开关值答案

【问题标题】：Displaying Switch Value in React在 React 中显示开关值
【发布时间】：2020-10-20 16:34:41
【问题描述】：

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

请检查此代码沙箱链接

<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属性负责切换状态吗？

标签： javascript reactjs ecmascript-6 formik react-material

【解决方案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>

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

【讨论】：