有没有办法显示进入屏幕时打开的中间单选按钮？答案

【问题标题】：Is there a way to display the middle radio button turned on when entering the screen?有没有办法显示进入屏幕时打开的中间单选按钮？
【发布时间】：2020-01-22 20:43:38
【问题描述】：

有没有办法在进入屏幕时显示中间单选按钮打开？即使当我按下同一个单选按钮时，它也不会自行关闭，但我只能在它们之间切换，并且当我按下它们时不会关闭它们。

这是我的例子：

import React, { useState } from 'react';
import { View, Text, StyleSheet, Platform } from 'react-native';
import { CheckBox } from 'react-native-elements';

    const SettingsScreen = props => {
    const [checked6, setChecked6] = useState(true);
    const [checked7, setChecked7] = useState(null);
    const [checked8, setChecked8] = useState(null);
    const handlePress = title => {
        checked6 === title ? setChecked6(null) : setChecked6(title)
        checked7 === title ? setChecked7(null) : setChecked7(title)
        checked8 === title ? setChecked8(null) : setChecked8(title)
}

          return (
                <CheckBox
                    iconLeft
                    checkedColor='green'
                    title='bomba6'
                    checkedIcon='dot-circle-o'
                    uncheckedIcon='circle-o'
                    checked={checked6 === 'bomba6'}
                    onPress={() => handlePress('bomba6')}
                />
                <CheckBox
                    iconLeft
                    checkedColor='green'
                    title='bomba7'
                    checkedIcon='dot-circle-o'
                    uncheckedIcon='circle-o'
                    checked={checked7 === 'bomba7'}
                    onPress={() => handlePress('bomba7')}
                />
                <CheckBox
                    iconLeft
                    checkedColor='green'
                    title='bomba8'
                    checkedIcon='dot-circle-o'
                    uncheckedIcon='circle-o'
                    checked={checked8 === 'bomba8'}
                    onPress={() => handlePress('bomba8)')}
                />
             );
          };

      export default SettingsScreen;

【问题讨论】：

您需要使用defaultChecked 而不是checked 才能修改单选按钮

标签： javascript react-native checkbox radio-button expo

【解决方案1】：

使用 useEffect 钩子打开中间的单选按钮并使用下面的代码就可以了

import React, { useState, useEffect } from 'react';
import { View, Text, StyleSheet, Platform } from 'react-native';
import { CheckBox } from 'react-native-elements';

const SettingsScreen = props => {
  const [checked6, setChecked6] = useState(null);
  const [checked7, setChecked7] = useState(null);
  const [checked8, setChecked8] = useState(null);
  const handlePress = title => {
    if (title === 'bomba6') {
      setChecked6(!checked6);

    } else if (title === 'bomba7') {
     setChecked7(!checked7);
    } else {
      setChecked8(!checked8);
    }
  }

  useEffect(() => {
    setChecked7(true)
  }, [])

  console.log(checked6)

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <CheckBox
        // iconLeft
        checkedColor='green'
        title='bomba6'
        checkedIcon='dot-circle-o'
        uncheckedIcon='circle-o'
        checked={checked6}
        onPress={() => handlePress('bomba6')}
      />
      <CheckBox
        iconLeft
        checkedColor='green'
        title='bomba7'
        checkedIcon='dot-circle-o'
        uncheckedIcon='circle-o'
        checked={checked7}
        onPress={() => handlePress('bomba7')}
      />
      <CheckBox
        iconLeft
        checkedColor='green'
        title='bomba8'
        checkedIcon='dot-circle-o'
        uncheckedIcon='circle-o'
        checked={checked8}
        onPress={() => handlePress('bomba8)')}
      />
    </View>
  );
};

export default SettingsScreen;

【讨论】：

【解决方案2】：

首先，通过阅读您的描述，我认为您不需要此处的复选框。如果您使用单选按钮，这将是一个更好的选择。查看单选按钮库here。

但是，您正确地使用了 useState 钩子。

【讨论】：