Question

嘿，所以我是新来的响应本机和Javascript的人，目前我正在学习制作一个自定义单选按钮，其图像类似于此页面中的my custom radio button，用户将从中选择一个按钮。列表，并且我想在页面首次呈现时使其显示一个按下的按钮，并且只允许用户选择一个按钮。谁能告诉我如何解决这个问题？预先感谢

这是我的验证码

RadioButton.js

export default class RadioButton extends Component {
    constructor(props) {
        super(props);

        this.state = {
            selected: this.props.currentSelection === this.props.value,
        }
    }

    button() {
        var imgSource = this.state.selected? this.props.normalImg : this.props.selectedImg;
        return (
          <Image
            source={ imgSource }
          />
        );
      }

      render() {
        let activeButton = this.props.activeStyle ? this.props.activeStyle : styles.activeButton;

        return (
            <View style={[styles.container, this.props.containerStyle, this.state.selected || this.props.normalImg ? activeButton : inactiveButton]}>
                <TouchableOpacity onPress={() => {
                    this.setState({ selected: !this.state.selected });
                    
                }}>
                    {
                       this.button()
                    }
                </TouchableOpacity>
            </View>

        );
    }
}

ActivityLog.js

class ActivityLog extends Component {
    constructor(props){
        super(props); 
    }
    
    render() {
      return (
        <View style={styles.innerContainer}>
                    <Text style={styles.dialogText}>{`Log my activity at ${time} as...`}</Text>
                        <View style={styles.buttonContainer}>
                            <RadioButton selectedImg={img.activity.breakA} normalImg={img.activity.break} containerStyle={{marginHorizontal: normalize(10)}}/>
                            <RadioButton selectedImg={img.activity.meetingA} normalImg={img.activity.meeting} containerStyle={{marginHorizontal: normalize(10)}}/>
                        </View>

                        <View style={styles.buttonContainer}>
                            <RadioButton selectedImg={img.activity.otwA} normalImg={img.activity.otw} containerStyle={{marginHorizontal: normalize(10)}}/>
                            <RadioButton selectedImg={img.activity.officeA} normalImg={img.activity.office} containerStyle={{marginHorizontal: normalize(10)}}/>
                        </View>
      );
    }
    
 }

Answer 1

将activeStatus提取到ActivityLog以便跟踪选择了哪个按钮，现在您将每个按钮的状态维护为本地状态。因此，很难知道其他组件来了解该按钮的活动状态。

这是一个粗略想法的通用实现。

const Child=(props)=>{
    <TouchableOpacity onPress={props.handlePress}>
        <Text style={[baseStyle,active && activeStyle]}>{props.title}</Text>
    </TouchableOpacity>
}
class Parent extends React.Component{
 state={
  selectedChild:''
 }
 changeSelection=(sometitle)=>{
  this.setState({
      selectedChild:sometitle
  })
 }
 render(){
     return(
         <View>
             <Child handlePress={()=>this.changeSelection('1')} active={this.state.selectedChild==='1'}/>
             <Child handlePress={()=>this.changeSelection('2')} active={this.state.selectedChild==='2'}/>
             <Child handlePress={()=>this.changeSelection('3')} active={this.state.selectedChild==='3'}/>
             <Child handlePress={()=>this.changeSelection('4')} active={this.state.selectedChild==='4'}/>
         </View>
     )
 }
}

Expo演示Link

自定义单选按钮React Native

1 个答案: