Ik maak een lijst met onsenui en reageer.
maar ik kan geen binding aanroepen vanuit onchanged.
Ik kon er niet achter komen…. Kan iemand dit oplossen?
dit is mijn code.
Ik wil de handlechanged-methode aanroepen vanuit het invoeritem.
Maar dan wordt de eigenschap ‘bind’ van undefined niet gelezen.
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>
);
}
}Antwoord 1, autoriteit 100%
https://facebook.github.io/react/ docs/reusable-components.html#no-autobinding
Geen autobinding
Methoden volgen dezelfde semantiek als reguliere ES6-klassen, wat betekent dat ze dit niet automatisch aan de instantie binden. U moet expliciet .bind(this)of pijlfuncties gebruiken =>:
U kunt bind() gebruiken om this
te behouden
<div onClick={this.tick.bind(this)}>
Of u kunt pijlfuncties gebruiken
<div onClick={() => this.tick()}>
We raden u aan om uw gebeurtenishandlers in de constructor te binden, zodat ze slechts één keer voor elke instantie worden gebonden:
constructor(props) {
super(props);
this.state = {count: props.initialCount};
this.tick = this.tick.bind(this);
}
Nu kunt u this.tickrechtstreeks gebruiken zoals het eenmaal in de constructor was gebonden:
Het is al gebonden in de constructor
<div onClick={this.tick}>
Dit is beter voor de prestaties van uw toepassing, vooral als u shouldComponentUpdate() implementeert met een oppervlakkige vergelijking in de onderliggende componenten.
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>
);
}
}Antwoord 2
Ik weet niet welke waarde in de rij wordt gepasseerd, maar u moet de rendercontext doorgeven om die functie en binden te bellen.
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>
);
}
}