[FR]: NutUI-React组件，cacasder组件自定义key后，onChange返回的选中值应该和自定义key定义的一致

[DreamSeeker321]

这个功能解决了什么问题？

在cascader组件中，使用optionKey来自定义关键字，数据可以正常渲染，但是在触发的onChange事件后返回的第二个参数中path中的数据变成了默认的valueKey、textKey、childrenKey。

你期望的组件设计是怎样的？

根据输入输入统一原则，最佳实现是保证选择操作后输出的字段名和输入的字段名一样，保持统一。

import  React,{useState} from "react";
import { Cascader, Cell } from '@nutui/nutui-react';

const App = () => {
  const [isVisibleDemo2, setIsVisibleDemo2] = useState(false)
  const [value2, setValue2] = useState(['福建', '福州', '台江区'])
  const [optionsDemo2, setOptionsDemo2] = useState([
    {
      value1: '浙江',
      text1: '浙江',
      items: [
        {
          value1: '杭州',
          text1: '杭州',
          disabled: true,
          items: [
            { value1: '西湖区', text1: '西湖区', disabled: true },
            { value1: '余杭区', text1: '余杭区' },
          ],
        },
        {
          value1: '温州',
          text1: '温州',
          items: [
            { value1: '鹿城区', text1: '鹿城区' },
            { value1: '瓯海区', text1: '瓯海区' },
          ],
        },
      ],
    },
    {
      value1: '湖南',
      text1: '湖南',
      disabled: true,
      items: [
        {
          value1: '长沙',
          text1: '长沙',
          disabled: true,
          items: [
            { value1: '西湖区', text1: '西湖区' },
            { value1: '余杭区', text1: '余杭区' },
          ],
        },
        {
          value1: '温州',
          text1: '温州',
          items: [
            { value1: '鹿城区', text1: '鹿城区' },
            { value1: '瓯海区', text1: '瓯海区' },
          ],
        },
      ],
    },
    {
      value1: '福建',
      text1: '福建',
      items: [
        {
          value1: '福州',
          text1: '福州',
          items: [
            { value1: '鼓楼区', text1: '鼓楼区' },
            { value1: '台江区', text1: '台江区' },
          ],
        },
      ],
    },
  ])
  const change2 = (value, path) => {
   // 此处返回的path中的数据，字段名应该是value1、text1和items。
    console.log('onChange', value, path)
    setValue2(value)
  }
  const onPathChange = (value, path) => {
    console.log('onPathChange', value, path)
  }

  return (
    <>
    <Cell
      title="选择地址"
      description={value2 || '请选择地址'}
      onClick={()=>{
        setIsVisibleDemo2(true)
      }}
     />
    <Cascader
      visible={isVisibleDemo2}
      value={value2}
      title="地址选择"
      options={optionsDemo2}
      optionKey={{
        textKey: 'text1',
        valueKey: 'value1',
        childrenKey: 'items',
      }}
      closeable
      onClose={()=>{setIsVisibleDemo2(false)}}
      onChange={change2}
      onPathChange={onPathChange}
    />
    </>
  );
};
export default App;

其中

 const change2 = (value, path) => {
    // 此处返回的path中的数据，字段名应该是value1、text1和items。
    console.log('onChange', value, path)
    setValue2(value)
  }

[boiboif]

antd是这么设计的，看了下源码有点难改，比较简单的改法是在源码onChange事件中对pathNodes做处理，但是这样会浪费性能