react，添加了一个监听上下键的操作，为什么Radio.Group也跟着上下键进行切换，有什么方法避免radio.group随着上下键切换

当我们在React组件中添加了监听上下键的操作时，如果我们按下上下键，事件会冒泡到父组件中，从而影响到子组件。因此，当我们在Radio.Group中按下上下键时，事件会冒泡到父组件，从而导致Radio.Group中的选项也会随之切换。

为了避免这种情况，我们可以在父组件中阻止事件冒泡到子组件，即在监听上下键的事件处理函数中，调用 `e.stopPropagation()` 方法来阻止事件冒泡。

下面是一个示例代码：

import React, { useState } from 'react';
import { Radio } from 'antd';

const data = ['选项1', '选项2', '选项3', '选项4'];

function App() {
  const [selectedIndex, setSelectedIndex] = useState(0);

  const handleKeyDown = e => {
    if (e.keyCode === 38 && selectedIndex > 0) {
      setSelectedIndex(selectedIndex - 1);
      e.stopPropagation(); // 阻止事件冒泡
    } else if (e.keyCode === 40 && selectedIndex < data.length - 1) {
      setSelectedIndex(selectedIndex + 1);
      e.stopPropagation(); // 阻止事件冒泡
    }
  };

  return (
    <div onKeyDown={handleKeyDown}>
      {data.map((item, index) => (
        <div key={index}>
          <Radio checked={selectedIndex === index}>{item}</Radio>
        </div>
      ))}
    </div>
  );
}

export default App;

在上面的代码中，我们在监听上下键的事件处理函数中，调用了 `e.stopPropagation()` 方法来阻止事件冒泡。这样，当我们按下上下键时，事件就不会冒泡到Radio.Group组件中，从而不会引起Radio.Group中的选项切换。