Question

我正在尝试使用Native-Base单选按钮。我已经添加了一些额外的代码来使单选按钮工作。虽然它仍然无法正常工作。这是代码：

import React, { Component } from 'react';
import { Container, Header, Content, ListItem, Text, Radio, Right } from 'native-base';
export default class RadioButtonExample extends Component {
constructor() {
  super();
  this.state = {
   itemSelected: 'itemOne',
 }
}
render() {
 return (
    <Container>
      <Header />
      <Content>
        <ListItem>
          <Text>Daily Stand Up</Text>
          <Right>
            <Radio onPress={() => this.setState({ itemSelected: 'itemOne' })}
              selected={this.state.itemSelected == 'itemOne'}
            />
          </Right>
        </ListItem>
        <ListItem>
          <Text>Discussion with Client</Text>
          <Right>
            <Radio onPress={() => this.setState({ itemSelected: 'itemTwo' })}
                  selected={this.state.itemSelected == 'itemTwo' }
                />
          </Right>
        </ListItem>
      </Content>
    </Container>
   );
  }
}

如何修复此代码？怎么了？

Answer 1

处理ListItem中的onPress事件

import React, { Component } from "react";
import { Container, Header, Content, ListItem, Text, Radio, Right } from "native-base";

export default class RadioButtonExample extends Component {

  constructor() {
    super();
    this.state = {
      itemSelected: "itemOne",
    };
  }

  render() {
    return (
      <Container>
        <Header />
        <Content>
          <ListItem onPress={() => this.setState({ itemSelected: "itemOne" })}>
            <Text>Daily Stand Up</Text>
            <Right>
              <Radio selected={this.state.itemSelected == "itemOne"} />
            </Right>
          </ListItem>
          <ListItem onPress={() => this.setState({ itemSelected: "itemTwo" })}>
            <Text>Discussion with Client</Text>
            <Right>
              <Radio selected={this.state.itemSelected == "itemTwo"} />
            </Right>
          </ListItem>
        </Content>
      </Container>
    );
  }
}

单选按钮不适用于ios

1 个答案: