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

Question

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

每次用户重新打开它时，我都需要进行过滤以记住它之前的选择，即使他 returns 来自另一个页面。它适用于基于值的组件，例如“范围滑块”或“文本搜索”，因为我可以获取以前保存的 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>

谢谢

Answer 1

React 似乎足够聪明，如果您将属性设置为等于 Javascript 不真实的表达式，它会自动删除该属性。您应该能够从您的商店中提取此状态。有关详细信息，请参阅。

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

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

Conditionally remember radio button selection in React

radio-button

twitter-bootstrap

reactjs

react-bootstrap

react-redux