我正在使用onsenui制作列表并做出反应。 但我无法通过onchanged调用绑定。
我无法弄清楚....有没有人可以解决这个问题?
这是我的代码。 我想从输入项调用handlechanged方法。 但是,无法读取未定义的属性'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) {
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>
);
}
}
答案 0 :(得分:24)
https://facebook.github.io/react/docs/reusable-components.html#no-autobinding
无自动绑定
方法遵循与常规ES6类相同的语义,这意味着它们不会自动将其绑定到实例。您必须明确使用.bind(this)
或箭头函数=>:
您可以使用bind()来保存this
<div onClick={this.tick.bind(this)}>
或者您可以使用箭头功能
<div onClick={() => this.tick()}>
我们建议您在构造函数中绑定事件处理程序,以便它们仅针对每个实例绑定一次:
constructor(props) {
super(props);
this.state = {count: props.initialCount};
this.tick = this.tick.bind(this);
}
现在您可以直接使用this.tick
,因为它在构造函数中绑定了一次:
它已经绑定在构造函数
中 <div onClick={this.tick}>
这对于应用程序的性能更好,特别是如果在子组件中使用浅比较实现shouldComponentUpdate()。
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>
);
}
}
答案 1 :(得分:0)
我不知道行中传递了什么值,但是你需要传递渲染上下文才能调用该函数并绑定。
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 (
<ListItem key={row} tappable>
<label className='left'>
<Input
inputId={`radio-${row}`}
checked={row === this.selectedValue}
onChange={this.handleChange.bind(renderContext, row)}
type='radio'
/>
</label>
<label htmlFor={`radio-${row}`} className='center'>
{row}
</label>
</ListItem>
)
}
render() {
var renderContext=this;
return (
<Page renderToolbar={this.renderToolbar}>
<p style={{textAlign: 'center'}}>
test
</p>
<List
dataSource={this.state.destinations}
renderRow={() => this.renderRadioRow(row,renderContext)}
/>
</Page>
);
}
}