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 {
  render() {
    return (
      <Container>
        <Header />
        <Content>
          <ListItem>
            <Text>Daily Stand Up</Text>
            <Right>
              <Radio selected={false} />
            </Right>
          </ListItem>
          <ListItem>
            <Text>Discussion with Client</Text>
            <Right>
              <Radio selected={true} />
            </Right>
          </ListItem>
        </Content>
      </Container>
    );
  }
}

我怎样才能让它发挥作用？请不要发送仅包含单选按钮功能的不同库。我已经检查了不同的单选按钮库。只需要在此代码中添加一些内容即可使其正常工作。

Answer 1

你可以添加onPress替换TouchableOpacity它会接受它的道具。

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 2

最简单的方法是，首先创建一个广播项目数组。

const radioItem = [
    { label: 'Female', value: 'female' },
    { label: 'Male', value: 'male' }
];

然后在您的内容内按以下步骤进行操作。

<Content>
   <Text>Select your choice</Text>
   {
     radioItem.map((data, key) => {
         return (
                  <ListItem key={key}>

                     <Left>
                         <Text>{data.label}</Text>
                     </Left>
                     <Right>
                         <Radio
                            onPress={()=> this.setState({radioValue:data.value})}
                            color={"gray"}
                            selectedColor={"gray"}
                            selected={data.value === this.state.radioValue}
                          />
                     </Right>
                  </ListItem>
                 )
       })
   }
</Content>

让我们理解这一点：

首先，您需要了解本机基础的Radio组件，它使用选定的道具检查布尔值true或false，并因此显示活动的radio。

因此，我们正在使用onPress动作来获取当前值，并将其存储到状态中，并且所选的props匹配该值并返回true或false。因此，我们可以默认看到两个无线电项目的值均为false，因为我们没有状态值。

您还可以通过在构造函数中定义状态值来设置默认选择的无线电

Answer 3

import React from "react"; import ReactDOM from "react-dom"; import "./index.css"; import App from "./components/App"; import { Router } from 'react-router-dom' import registerServiceWorker from "./registerServiceWorker"; import history from "./components/common/History"; ReactDOM.render(<Router history={history}><App /></Router>, document.getElementById('root')); registerServiceWorker();属性必须在ListItem节点上。我设法做到这一点：

import ReportInfo from './reporting/ReportInfo';
import FacilityContactsForm from "./facilities/FacilityContactsForm";
import "bootstrap/dist/css/bootstrap.min.css";

const store = init();

class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <Router>
          <div>
             <Header />
            <div className="container-fluid">
          <Route exact path="/" component={FacilitySearch} />
          <Route exact path="/facilities" render={() => <FacilitySearch {...this.props} />} />
          <Route exact path="/facilities/:id" render={(props) => <FacilityInfo id={props.match.params.id} {...this.props} />} />
          <Route exact path="/facilities/contacts/:id" render={(props) => <FacilityContactsForm id={props.match.params.id} {...this.props} />} />
          <Route exact path="/facilities/permits/:id" render={(props) => <PermitInfo id={props.match.params.id} {...this.props} />} />
          <Route exact path="/facilities/reports/:id" render={(props) => <ReportInfo id={props.match.params.id} {...this.props} />} />
        </div>
        <Footer />
      </div>
    </Router>
  </Provider>
);

Answer 4

我已经将RadioGroup调整为redux形式，这是水平无线电布局的代码：

$GLOBALS['TCA']['tt_content']['types']['myCustomElement']['columnsOverrides']['bodytext']['defaultExtras'] = 'richtext[*]:rte_transform[mode=ts_css]';

用法：

import React from 'react';
import { Radio, View, Text, Label } from 'native-base';
import { StyleSheet } from 'react-native';
import PropTypes from 'prop-types';
import { Field } from 'redux-form';
import { required } from './validaciones';

const RadioGroup = ({ label, name, options }) => (
  <View style={styles.container}>
    {!!label && <Label>{label}</Label>}
    <View style={styles.radioContainar}>
      <Field
        validate={[required]}
        component={({ input, options }) => options.map(option => (
          <View key={option.id} style={styles.radio}>
            <Radio
              id={option.id}
              type="radio"
              {...input}
              value={option.value}
              onPress={() => input.onChange(option.value)}
              selected={option.value === input.value}
            />
            <Text onPress={() => input.onChange(option.value)} style={styles.label}>
              {option.label}
            </Text>
          </View>
        ))
        }
        name={name}
        options={options}
      />
    </View>
  </View>
);

RadioGroup.propTypes = {
  options: PropTypes.arrayOf(
    PropTypes.shape({
      id: PropTypes.string.isRequired,
      label: PropTypes.string.isRequired,
      value: PropTypes.string.isRequired
    })
  ),
  label: PropTypes.string,
  name: PropTypes.string.isRequired
};

const styles = StyleSheet.create({
  container: {
    marginTop: 14,
    marginBottom: 7
  },
  radioContainar: {
    marginTop: 7,
    flexDirection: 'row',
    alignSelf: 'flex-start'
  },
  label: {
    marginLeft: 3
  },
  radio: {
    marginRight: 14,
    flexDirection: 'row',
    alignSelf: 'flex-start'
  }
});

export default RadioGroup;

单选按钮在Native-Base中不起作用

4 个答案: