有条件地记住 React 中的单选按钮选择答案

【问题标题】：Conditionally remember radio button selection in React有条件地记住 React 中的单选按钮选择
【发布时间】：2020-12-24 08:35:35
【问题描述】：

我正在创建一个模式来过滤配置文件，在 react-bootstrap 和 redux 上。

每次用户重新打开它时，我都需要过滤以记住它的先前选择，即使他从另一个页面返回。它适用于基于值的组件，例如“范围滑块”或“文本搜索”，因为我可以获取之前保存的 redux 存储并插入组件的属性，例如：

value={rangeValue}

但对于单选按钮，我不确定，因为属性本身“已选中”是它自己的值。

      <Form.Check
        inline
        label="male"
        name="male"
        checked   <-----------
        onChange={(e) => onRadioChange(e)}
      />

我希望它仅在用户之前这样做时才显示“已选中”。我已经在我的商店中保存了用户选择（无论是否选中），但不知道如何有条件地插入。

下面返回的 JSX

import React, { useState } from "react";
import { Form, Button } from "react-bootstrap";

...

<Form>
  <div className="form_content_wrap">
    <Form.Group>
      <Form.Label htmlFor="formControlRange">Age: {rangeValue}</Form.Label>
      <Form.Control
        type="range"
        className="form-control-range"
        id="formControlRange"
        min="0"
        max="100"
        value={rangeValue}
        onChange={(e) => setRangeValue(e.currentTarget.value)}
      />
    </Form.Group>

    <Form.Group>
      <Form.Label htmlFor="formControlRange">Gender: &nbsp;</Form.Label>

      <Form.Check
        inline
        label="female"
        name="female"
        onChange={(e) => onRadioChange(e)}
      />

      <Form.Check
        inline
        label="male"
        name="male"
        checked   <<<------- THIS IS WHERE I WANT TO CHANGE
        onChange={(e) => onRadioChange(e)}
      />
    </Form.Group>

    <Form.Group>
      <Form.Label>Keyword</Form.Label>
      <Form.Control
        type="text"
        placeholder="search description"
        value={descValue}
        onChange={(e) => setDescValue(e.currentTarget.value)}
      />
    </Form.Group>


    <Button
      variant="primary"
      type="submit"
      onClick={onFormSubmit}
      style={{ marginRight: "10px" }}
    >
      Submit
    </Button>
    <Button variant="primary" type="submit" onClick={onFormClear}>
      Clear
    </Button>[enter image description here][1]
  </div>
</Form>

谢谢

【问题讨论】：

谢谢@timtim17。你回答了我的问题。存在一旦选择默认值就无法取消选中单选按钮的问题；我改用复选框并使用带状态的受控组件来修复它。

标签： reactjs twitter-bootstrap react-redux radio-button react-bootstrap

【解决方案1】：

如果您将属性设置为不真实的 Javascript 表达式，React 似乎足够聪明，会自动删除该属性。您应该能够从您的商店中提取此状态。详情请见this question。

<Form.Check checked={true} />
<Form.Check checked={false} />

【讨论】：