在我的本机应用程序中,我正在尝试使用复选框显示我的应用程序联系人详细信息以供选择.
这是我的代码：
这是我的代码：
<ListView
dataSource={this.state.dataSource}
renderRow={(rowData,sectionID,rowID) =>
<TouchableHighlight onPress={() => this.goRideDetails(rowData)}>
<Text style={styles.rideHeader}>{rowData.name} </Text>
<CheckBox checked={this.state.checked} onCheckBoxPressed={()=>this.setState({checked:!this.state.checked})}/>
</TouchableHighlight>
}/>
在我的视图中,复选框显示在每一行,但不起作用.
任何人都可以帮助我.谢谢.
您可以使用组件分离轻松完成此操作.请看看这里：
export default class ContactList extends Component {
static propTypes = {
contacts: React.PropTypes.array,}
static defaultProps = {
contacts: [],}
constructor(){
super();
this._renderRow = this._renderRow.bind(this);
}
_renderRow(rowData,rowID) {
return <Contact info={ rowData } />;
}
render() {
return (
<ListView
dataSource={ this.props.contacts }
renderRow={ this._renderRow }
/>
);
}
}
export class ContactList extends Component {
static propTypes = {
info: React.PropTypes.object.isrequired,}
constructor(){
super();
this.goRideDetails = this.goRideDetails.bind(this);
this.setChecked = this.setChecked.bind(this);
}
goRideDetails() {
//your logic here
}
setChecked() {
this.props.info.checked = !this.props.info.checked; //will be much better to do it with redux and action creators
}
render() {
return (
<TouchableHighlight onPress={ this.goRideDetails }>
<Text style={ styles.rideHeader }>{this.props.info.name} </Text>
<CheckBox checked={ this.props.info.checked } onCheckBoxPressed={ this.setChecked } />
</TouchableHighlight>
);
}
}
之后你可以简单地打电话：
<ContactList contacts={this.state.dataSource} />
在你的jsx和瞧.
重要说明2：尝试开始使用redux或flux来存储应用程序的状态.它将提供更好的代码设计.
希望,这会有所帮助.
