Как обратиться к this класса из return в функции?

Question

Пытаюсь вывести в цикле список из стейта с радио-кнопкой рядом. Но не получается нацепить обработчик на эту кнопку. Такой код:

Class App extends Component {
  state = {
    option: 'option',
    points = ['goblin', 'puchkov', 'klim', 'sanich']
};
  handleRadionButton(x) {
   this.setState({ option: x.target.value })
}
render() {
    const point = this.state.points.map(function(item, index) {
        return(
           <ul>
             <li key={index}>{item}</li>
             <input onChange={this.handleRadioButton.bind(this)} value={'option' + index} type='radio'></input>
      &lt;/ul&gt;


         )
     })
return (
  &lt;div&gt;
    { point }
  &lt;/div&gt;  

)

}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

В итоге, при попытке обращения к this, оказывается, что оно === undefined. Кто-нибудь может подсказать, что не так? И как можно обратиться к state в return в функции?

Answer 1

у вас 2 варианта:

сделать из функции handleRadionButton стрелочную функцию

handleRadionButton = () => {}

либо привязать в контекст например в конструкторе

constructor(props) {
    super(props)
    this.handleRadionButton = this.handleRadionButton.bind(this)
}

вот тут можно почитать