为了账号安全,请及时绑定邮箱和手机立即绑定

自定义单选按钮 React Native

自定义单选按钮 React Native

哈士奇WWW 2021-11-04 16:43:48
嘿,所以我是本机和 javascript 的新手,目前我正在学习制作一个带有图像的自定义单选按钮,它看起来像这样我在此页面中的自定义单选按钮用户将从列表中选择一个按钮,我想要在页面第一次渲染时显示一个按下的按钮,并且用户只能选择一个按钮。谁能告诉我如何解决这个问题?提前致谢这是我的代码单选按钮.jsexport 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>        );    }}活动日志.jsclass ActivityLog extends Component {    constructor(props){        super(props);     }
查看完整描述

1 回答

?
富国沪深

TA贡献1790条经验 获得超9个赞

将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>

     )

 }

}


查看完整回答
反对 回复 2021-11-04
  • 1 回答
  • 0 关注
  • 244 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信