在页面加载时呈现已选择的单选按钮 - React js

Question

我有这个组件：

import React from 'react';

const options = [
  { label: "Lifestyle", value: "lifestyle"},
  { label: "Area", value: "area" },
  { label: "Random", value: "random" }
];
const ChannelCategory = props =>
  props.visible ? (
    <div>
      {props.title}
      <ul>
        {options.map((option) => (
          <li key={option.value}>
            <label>
              {option.label}
              <input
                className={props.className}
                name={props.name} // need to be different
                selected={props.selected === option.value} // e.g. lifestyle === lifestyle
                onChange={() => props.onChange(option.value)}
                type="radio"
              />
            </label>
          </li>
        ))}
      </ul>
    </div>
) : null;


export default ChannelCategory;

我在 .map 的另一个页面上呈现它：

  let displayExistingChannels = null;
  if (channels !== null){
   displayExistingChannels = (
      channels.map(channel => {
        return (
          <Grid key={channel.key} item style={styles.gridItem} justify="space-between">
            <ChannelListItem
              channel={channel}
              isSaving={isSaving}
              onDeleteChannelClick={onDeleteChannelClick}
              key={channel.key}
              onFormControlChange={onFormControlChange}
              onUndoChannelClick={onUndoChannelClick}
            />
            {channel.category}
            <ChannelCategory
              visible={true}
              onChange={value => setCategoryName(value)}
              title="Edit Category"
              selected={channel.category}
              name={channel.key} // unique for every channel
            />
          </Grid>
        )
      })
    )
  }

我在地图上使用假数据：

const fakeChannelData = setupChannels(
[{id: "2f469", name: "shopping ", readOnly: false, category: "lifestyle"},
 {id: "bae96", name: "public", readOnly: true, category: "null"},
  {id: "06ea6", name: "swimming ", readOnly: false, category: "sport"},
  {id: "7e2bb", name: "comedy shows ", readOnly: false, category: "entertainment"}]);

 const [channels, setChannels] = useState(fakeChannelData);

请有人告诉我为什么当我在我的.map 函数中添加selected={channel.category} 时，它没有显示在页面加载时在 FE 上预选的所选类别？不知道我哪里出错了？谢谢！

Answer 1

checked 是用于input 标记的正确属性，而不是selected。

<input
  ...
  checked={props.selected === option.value}
  ...
/>

参考：https://developer.mozilla.org/fr/docs/Web/HTML/Element/Input/radio