reactjs中如何访问嵌套对象

Question

I have handle click and I want to access the className of the div element, how can I do that

1. this is the element i want to get the div className

    <div className="milad"> <IconButton style={{outline:'none', color: 'white', float:'right', marginRight:'20px', marginTop: "5px"}} className = "iconButton" >menu <MenuIcon/> </IconButton> </div>

2. this is my

   checkHandleClick = (event) => { console.log(event); } ----------------------------------------------------------------- <ClickAwayListener onClickAway={((e) => this.checkHandleClick(e))}> -----some code------ </ClickAwayListener>

I want to access this Console.log

Answer 1

You could do using event.target.className

checkHandleClick = (event) => {
    console.log(event.target.className);
}
-----------------------------------------------------------------
<ClickAwayListener onClickAway={((e) => this.checkHandleClick(e))}>
-----some code------
</ClickAwayListener>

Answer 2

You should use ref for it.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef} />;
  }
}

Or if you're using hooks

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current` points to the mounted text input element
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}