react-json-view
react-json-view copied to clipboard
how can i get all the parent keys until root when onSelect ?
{ 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
@mengke111 Does your click event want to be on 'key' or 'value' ?
@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>
)
}
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!
@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)
}}
/>
)
}}
/>
Thank you! I will try it. As far as I'm concerned, sounds like this issue can now be closed.