Question

我不会创建与本机基本组件进行本机反应的无线电组。我现在想创建一个单选按钮。我不想将其连接到redux以在表单中使用它，而是使用state创建了它，但是现在我不知道如何编码以使其可重用，以更改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})}
                    />

我想将所有逻辑放到我的组件中，然后传递数据并按onpress，然后让其余的事情完成

Answer 1

react-native-simple-radio-button具有用于React Native的简单且有用的单选按钮组件

Answer 2

我是这样解决的：

ResultError

如何创建自定义广播组

2 个答案: