react native:当单击BOB文本时，如何标记复选框?

Question

在单击BOB文本时如何标记复选框?在我的示例中，我还需要通过单击文本BOB来选中该框。我很乐意帮忙。我添加了减速器和checxbox的动作。希望你能理解它的方式。

这是减速器

import {
SET_CURRENT_TAB_INFO,
SET_CURRENT_TAB_NAME,
SET_CURRENT_TIME,
SET_CHECKBOX,
SET_CHECKBOX2,
SET_REQUESTID,
SET_IS_FORM_CHECKED,
SET_INPUTS_TEXT,
} from '../../constants/BitzuaDigumConstants';
const initializeState = {
currentTabName: '',
currentTabInfo: null,
currentTime: '',
checkBox: false,
checkBox2: false,
requestId: 0,
isFormChecked: false,
inputsText: {}
};
export default function BitzuaDigumReducer(state = initializeState, action) {
switch (action.type) {
case SET_CURRENT_TAB_NAME:
return {
...state,
currentTabName: action.payload,
};
case SET_IS_FORM_CHECKED:
return {
...state,
isFormChecked: action.payload,
};
case SET_INPUTS_TEXT:
return {
...state,
inputsText: action.payload,
};
case SET_CURRENT_TAB_INFO:
if (!action.payload) {
return state;
}
if (!state.currentTabInfo) {
// here if currentTabInfo == null
return {
...state,
currentTabInfo: action.payload, // it will set the value from payload
};
}
// if currentTabInfo already had some values (it means it not null)
return {
...state,
currentTabInfo: {
...state.currentTabInfo,
...action.payload,
},
};
case SET_CURRENT_TIME:
return {
...state,
currentTime: action.payload,
};
case SET_CHECKBOX:
return {
...state,
checkBox: action.payload,
};
case SET_CHECKBOX2:
return {
...state,
checkBox2: action.payload,
};
case SET_REQUESTID:
return {
...state,
requestId: action.payload,
};
default:
return state;
}
}

这是调度动作

export function setCheckBox(data = false) {
const payload = data;
return { type: SET_CHECKBOX, payload };
}

import { setCheckBox } from '../redux/actions/BitzuaDigumActions';
function NetuneyDigum(props) {
const isSelected = useSelector(
(rootState) => rootState.BitzuaDigumReducer.checkBox
);
return (
<TouchableOpacity
activeOpacity={1}
style={{
flexDirection: 'row',
alignSelf: 'flex-start',
top: 20,
left: 10,
}}
>
<CheckBox
value={isSelected}
onValueChange={(value) => dispatch(setCheckBox(value))}
style={styles.checkbox}
tintColors={{ true: 'white', false: 'white' }}
/>
<Text style={styles.label}>BOB</Text>
</TouchableOpacity>
);
}

Answer 1

有两种方法:onPress属性可以在TouchableOpacity组件上设置，也可以在Text组件上设置。在React Native中，所有的Text组件都是可触摸的。并设置onPress以改变复选框的值，类似于您在onValueChange上所做的。我不知道代码到底是什么样子，因为我不知道你在调度操作中做了什么。

编辑:

的例子:

将此添加到Text:onPress={(value) => dispatch(toggleCheckBox())}

创建这个函数:

export function toggleCheckBox() {
return { type: TOGGLE_CHECKBOX };
}

添加到reducer:

case TOGGLE_CHECKBOX:
return {
...state,
checkBox: !state.checkBox,
};