在 React 中显示开关值

Question

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

请检查这个代码沙箱link

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

Answer 1

你必须使用 checked 属性

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

更新

准确的说：在你通过Switch控制的地方加上checked。所有其他代码不应被触及

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

Answer 2

开关的on/off状态由属性'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>

两者似乎都工作正常。

在 React 中显示开关值

Displaying Switch Value in React

javascript

ecmascript-6

reactjs

formik

react-material