Как создать собственную радиогруппу - PullRequest
Новая
       17

Как создать собственную радиогруппу

0 голосов
/ 26 июня 2019

Я не хочу создавать радиогруппу в соответствии с нативными базовыми компонентами.Я сделал радио кнопку, теперь я хочу создать группу.Я не хочу связывать его с Redux, чтобы использовать его в моих формах, я создал его с состоянием, но теперь я не знаю, как кодировать, чтобы сделать его многоразовым для изменения другого набора данных в Redux.

я сделал это с компонентом состояния и класса 

constructor(props) {
    super(props);
    this.state = {
        data: [{label: 'گزینه اول', value: false}, {label: 'گزینه دوم', value: true}, {label: 'گزینه سوم', value: false}
            , {label: 'گزینه چهارم', value: false}, {label: 'گزینه پنچم', value: false}, {label: 'گزینه ششم', value: false}],
        lastCheckedIndex: 0,
    };
}

componentDidMount() {
    this.findCheckedFirst();
}

onRadioPress = (value, index) => {
    console.log(index + ' -  ' + this.state.lastCheckedIndex);
    if (index !== this.state.lastCheckedIndex) {
        const {data} = this.state;
        data[index].value = !value;
        data[this.state.lastCheckedIndex].value = false;
        this.setState({data, lastCheckedIndex: index});
    }
};

findCheckedFirst = () => {
    for (let i = 0; i < this.state.data.length; i++) {
        console.log(this.state.data[i].value);
        if (this.state.data[i].value === true) {
            this.setState({lastCheckedIndex: i});
        }
    }
};

render() {
    const {listDirection, textStyle, title} = this.props;
    const {_label, _container, _title} = styles;
    return (
        <View style={_title}>
            <Text>{title}</Text>
            <View style={[_container, listDirection]}>
                {this.state.data.map((item, index) =>
                    <CustomRadioBtn
                        key={index}
                        label={item.label}
                        textStyle={[_label, textStyle]}
                        onPress={() => this.onRadioPress(item.value, index)}
                        selected={item.value}
                    />
                )}
            </View>
        </View>
    )
}

} 

                    <NewCustomRadioGroup
                        onPress={() => console.log('Working !!!!')}
                        data={genderGroup}
                        listDirection={{ flexDirection: 'row' }}
                        title={'جنسیت'}
                        onPress={() => this.props.signUpFormUpdate({prop: 'user_gender_value', value: !signUpData.user_gender_value})}
                    />

Я хочу поместить всю логику в свой компонент и просто передать данные и нажать и позволить ему сделать все остальное

Ответы [ 2 ]

0 голосов
/ 26 июня 2019

реагирует на родство-простая-радио-кнопка имеет простой и полезный компонент переключателя для React Native

0 голосов
/ 26 июня 2019

Я решил это так: 

    <NewCustomRadioGroup
                        data={genderGroup}
                        listDirection={{ flexDirection: 'row' }}
                        title={'جنسیت'}
                        onPress={(value) => this.props.signUpFormUpdate({prop: 'user_gender_value', value})}
                    />

onRadioPress = (value,index,onPress) => {
        if (index !== this.state.lastCheckedIndex) {
            const {data} = this.state;
            data[index].checked = !value;
            data[this.state.lastCheckedIndex].checked = false;
            this.setState({data,lastCheckedIndex: index});
            onPress(data[index].value);
        }
    };   


<CustomRadioBtn
                            onPress={() => this.onRadioPress(item.checked,index,onPress)}
                            key={index}
                            label={item.name}
                            textStyle={[_label, textStyle]}
                            selected={item.checked}
                        />
...