uiwjs / react-json-view

A React component for displaying and editing javascript arrays and JSON objects.
https://uiwjs.github.io/react-json-view/
MIT License
188 stars 11 forks source link

how can i get all the parent keys until root when onSelect ? #27

Open mengke111 opened 8 months ago

mengke111 commented 8 months ago

{ name: 'John', age: 30, hobbies: ['reading', 'coding', 'swimming'], address: { street: '123 Main St', city: 'New York', country: { name: 'Main ', codex: '123', ss: 'fdfdf' } } }

when i select codex ,I want get codex and country and address

function onSelect(e) { console.log("onSelect") console.log(e) }

Thanks very much

jaywcjlove commented 8 months ago

@mengke111 Does your click event want to be on 'key' or 'value' ?

jaywcjlove commented 8 months ago

@mengke111

import React from 'react';
import JsonView from '@uiw/react-json-view';

export default function Demo() {
  return (
    <JsonView
      style={{
        '--w-rjv-background-color': '#ffffff',
      }}
      value={{
        name: 'John',
        age: 30,
        hobbies: ['reading', 'coding', 'swimming'],
        address: {
            street: '123 Main St',
            city: 'New York',
            country: {
                name: 'Main ',
                codex: '123'
            }
        }
      }}
    >
      <JsonView.Row
        as="div"
        render={(props, { keyName, value, parentValue }) => {
          return (
            <div
              {...props}
              onClick={() => {
                console.log("keyName", keyName)
                console.log("value", value)
                console.log("parentValue", parentValue)
              }}
            />
          )
        }}
      />
    </JsonView>
  )
}
andreimatei commented 7 months ago

I had the same question and I'm a bit confused about the answer. Say that, when a key is clicked, I want to get access to the whole sequence of keys on the path from the root to the node that was clicked (i.e. I want the click handler to get access to all the keys on the path at once). How would I do that / how does the JsonView.Row component help me? Thanks!

jaywcjlove commented 6 months ago

@andreimatei upgrade v2.0.0-alpha.14

<JsonView.Row
  as="div"
  render={(props, { keyName, value, parentValue, keys = [] }) => {
    return (
      <div
        {...props}
        onClick={() => {
          console.log("keys", keys)
        }}
      />
    )
  }}
/>
andreimatei commented 6 months ago

Thank you! I will try it. As far as I'm concerned, sounds like this issue can now be closed.