https://facebook.github.io/react/docs/reusable-components.html#no-autobinding
No Autobinding
Methods follow the same semantics as regular ES6 classes, meaning that they don’t automatically bind this to the instance. You’ll have to explicitly use .bind(this) or arrow functions =>:
You can use bind() to preserve this
Or you can use arrow functions
We recommend that you bind your event handlers in the constructor so they are only bound once for every instance:
constructor(props) {
super(props);
this.state = {count: props.initialCount};
this.tick = this.tick.bind(this);
}
Now you can use this.tick directly as it was bound once in the constructor:
It is already bound in the constructor
export default class MainPage extends React.Component {
constructor(props) {
super(props);
this.state = {
selectedValue: “myself”,
destinations: [“myself”,”somebody”],
};
this.renderRadioRow = this.renderRadioRow.bind(this);
}
handleChange(value) {
this.setState({selectedValue: value});
}
renderRadioRow(row) {
return (
{
this.handleChange(row);
}
type=’radio’
/>
{row}
)
}
render() {
return (
test
);
}
}
I dont know what value is passed in row , but you need to pass the render context in order to call that function and bind.
export default class MainPage extends React.Component {
constructor(props) {
super(props);
this.state = {
selectedValue: “myself”,
destinations: [“myself”,”somebody”],
};
}
handleChange(value) {
this.setState({selectedValue: value});
}
renderRadioRow(row,renderContext) {
return (
)
}
render() {
var renderContext=this;
return (
test
this.renderRadioRow(row,renderContext)}
/>
);
}
}