I'm making list using onsenui and react. but I cannot call a bind from onchanged.
I couldn't figure out.... Does anyone can solve this?
this is my code. I'd like to call handlechanged method from input item. But then, Cannot read property 'bind' of undefined is raised.
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) { return ( <ListItem key={row} tappable> <label className='left'> <Input inputId={`radio-${row}`} checked={row === this.selectedValue} onChange={this.handleChange.bind(this, row)} type='radio' /> </label> <label htmlFor={`radio-${row}`} className='center'> {row} </label> </ListItem> ) } render() { return ( <Page renderToolbar={this.renderToolbar}> <p style={{textAlign: 'center'}}> test </p> <List dataSource={this.state.destinations} renderRow={this.renderRadioRow} /> </Page> ); } }
The “cannot read property of undefined” error occurs when you attempt to access a property or method of a variable that is undefined . You can fix it by adding an undefined check on the variable before accessing it.
This is because React uses a very different syntax and data structures than Python, which makes it difficult for Python developers to adapt to. In this article, we'll map out a road plan for getting started with React, as well as the core prerequisites for diving into React as a Python developer.
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
<div onClick={this.tick.bind(this)}>
Or you can use arrow functions
<div onClick={() => this.tick()}>
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
<div onClick={this.tick}>
This is better for performance of your application, especially if you implement shouldComponentUpdate() with a shallow comparison in the child components.
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 ( <ListItem key={row} tappable> <label className='left'> <Input inputId={`radio-${row}`} checked={row === this.selectedValue} onChange={() => { this.handleChange(row); } type='radio' /> </label> <label htmlFor={`radio-${row}`} className='center'> {row} </label> </ListItem> ) } render() { return ( <Page renderToolbar={this.renderToolbar}> <p style={{textAlign: 'center'}}> test </p> <List dataSource={this.state.destinations} renderRow={this.renderRadioRow} /> </Page> ); } }
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