How to attach a listener to an existing ReactJS home element?

Question

JavaScript

How to attach a listener to an existing ReactJS home element?
For example, I render radio buttons on the server. If the user clicks on one of them, I need to show the corresponding content, how can I attach a listener to it and pass them to react?

Answer 1

You can hang a listener like this:
A)
1) Write in the jsx tag 2) Write in the code or in the same ref: But this is not the best practice. B)ref={(elem)=>{this.elem = elem}}

class NavigationBlock extends Component {

  constructor(props) {
    super(props);
    this.props=props;
    this.handlerClick=this.handlerClick.bind(this);
  }

  handlerClick(e) {
      //обработка клика
  }

  render() {
      let emenets = bigArrayData.map((item)=>{
          return <div onClick={this.handlerClick}>item</div>
      }); 
      return <div>{elements}</div>
  }
}

If you need to keep track of which input is pressed, you can go this way:
A) catch something through e.target.
B)

handlerClick(number) {
       return (e)=>{
              alert(number); //Типа обработка
       }
  }

  render() {
      let emenets = bigArrayData.map((item, i)=>{
          return <div onClick={this.handlerClick(i)}>item</div>//вместо i любое значение
      }); 
      return <div>{elements}</div>
  }