javascript - 一旦单击 React，单选按钮的状态将不会保留

Question

我有一个供人们交谈的聊天室 channel 列表，即有一个生活方式 channel 、购物 channel 、宠物 channel 等。

我现在正在尝试对每个 channel 进行分类，以便用户更容易找到他们想要的内容。为此，在创建聊天室 channel 时，我需要用户选择他们正在创建的 channel 最适合哪个类别。有点像 YouTube 在上传视频时所做的那样。

到目前为止，我已经创建了一个单独的组件，它是一个单选按钮列表，其中包含用户可以将其 channel 放入的不同类别:

import React from 'react';

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


export default ChannelCategory;

我在另一个组件中使用此组件，以便当用户创建 channel 时他们还可以添加类别。我的问题是，当用户为一个 channel 选择类别时，这很好，但是当他们为列表中的另一个 channel 选择类别时，前一个 channel 的类别就会消失，依此类推。

[...]

export default function Channels() {

  const [channelName, setChannelName] = useState('');
  const [channels, setChannels] = useState(channelData);

[...] 

  const onFormControlChange = (event, key) => {
    if (event.target.value.length <= 100) {
      if (channels[key]) {
        let existingChannels = [...channels];
        existingChannels[key].name = event.target.value;
        setChannels(existingChannels);
      } else {
        setChannelName(event.target.value); 
      }
    }
  };

  const onAddCategory = (value, key) => {
    let existingChannels = [...channels]; 
      if (existingChannels[key]) {
     existingChannels[key].category = value; 
   }
    setChannels(existingChannels); 
  };

  const onAddChannelClick = () => {
    if (channelName === '') {
      return;
    }
    let existingChannels = [...channels];
    let newChannel = {
      key: existingChannels.length,
      name: channelName,
      deletable: true,
      markedForDelete: false,
      category: null
    };
    existingChannels.push(newChannel);
    setChannels(existingChannels);
    setChannelName('');
  };

[...]

  return (
    <form noValidate autoComplete='off' onSubmit={onSubmit}>
      <Card style={styles.card}>
      [...]
        <CardContent>
          <Box padding={3}>
         [...]
            <Box marginTop={3} width='50%'>
              <Grid container direction='column' justify='flex-start' alignItems='stretch' spacing={1}>
                {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}
                    />
                      <Grid>
                        <ChannelCategory
                          key={channel.key}
                          visible={true}
                          onChange={value => onAddCategory(value, channel.key)}
                          title="Add your channel to a category so that users can find it."
                          selected={channel.category}
                        />
                      </Grid>

                  </Grid>
                  )
                })}
                <Grid item style={styles.gridItem}>
                  <ChannelFormControl
                    channelName={channelName}
                    isSaving={isSaving}
                    onFormControlChange={onFormControlChange}
                    onAddChannelClick={onAddChannelClick} 
                    onAddChannelKeyPress={onAddChannelKeyPress}
                  />
                </Grid>
        [...]
                </Grid>
              </Grid>
            </Box>
          </Box>
        </CardContent>
      </Card>
     [...]
    </form>
  );
}

谁能告诉我为什么会发生这种情况吗？我想我需要以某种方式存储每个类别的状态，一旦它被点击，但我不知道如何。提前致谢!

Answer 1

发生这种情况是因为所有 radio 输入都具有相同的 name="test"，将 name 更改为动态的内容，例如 name={option.label}，您将能够选择多个按钮。

另一种方法是使用type='checkbox'而不是radio