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

问题描述

我正在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>

谢谢

解决方法

如果将属性设置为等于真值的Javascript表达式，则该方法看起来足够聪明，可以自动删除该属性。您应该能够从商店中获取此状态。有关更多详细信息，请参见this question。

item.name + '/' + (item.DisplayName ? item.DisplayName: item.otherDisplayName)
// OR
item.name + '/' + (item.DisplayName ?? item.otherDisplayName)