getInitialState
is not used in ES6 classes. Instead assign this.state
in the constructor.propTypes
should be a static class variable or assigned to the class, it should not be assigned to component instances.export default class RadioOther extends React.Component {
static propTypes = {
name: React.PropTypes.string.isRequired,
};
constructor(props) {
super(props);
this.state = {
otherChecked: false,
};
}
// Class property initializer. `this` will be the instance when
// the function is called.
onRadChange = () => {
...
};
...
}
See more in the React's documentation about ES6 Classes: Converting a Function to a Class
Adding to Ross's answer.
You could also use the new ES6 arrow function on the onChange property
It is functionally equivalent to defining this.onRadChange = this.onRadChange.bind(this);
in the constructor but is more concise in my opinion.
In your case the radio button will look like the below.
<input type="radio"
ref="otherRadBtn"
onChange={(e)=> this.onRadChange(e)}
name={this.props.name}
value="other"/>
Update
This "more concise" method is less efficient than the options mentioned in @Ross Allen's answer because it generates a new function each time the render()
method is called
If you are using babel-plugin-transform-class-properties or babel-preset-stage-2 (or stage-1, or stage-0), you can use this syntax:
class RadioOther extends React.Component {
static propTypes = {
name: React.PropTypes.string,
...
};
state = {
otherChecked: false,
};
onRadChange = () => {
...
};
...
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With