在化简器反应本机中重置颜色值

Question

我的反应原生代码有些问题

我想重置我的 rgb 值，但我没有任何想法可以这样做 我有很多尝试修复它们。当我使用

myReducer({WarnaDiganti： 'red'， jumlah： -100 * COLOR_INC}(

要使"红色"的值恢复为 0 或负数，它仍然不起作用。

我应该怎么做才能解决它？ 感谢您对:)的帮助

import React, {useReducer} from 'react';
import {Text, View, Button} from 'react-native';
import ColorCounter from '../components/ColorCounter';
const COLOR_INC = 15;
const reducer = (state, action) => {
switch(action.WarnaDiganti){
case 'red':
return state.red + action.jumlah > 255 || state.red + action.jumlah <= 0 ? state:{...state, red: state.red + action.jumlah};
case 'green':
return state.green + action.jumlah > 255 || state.green + action.jumlah < 0 ? state:{...state, green: state.green + action.jumlah};
case 'blue':
return state.blue + action.jumlah > 255 || state.blue + action.jumlah < 0 ? state:{...state, blue: state.blue + action.jumlah};
default:
return state;
}
}
const SquareColorReduce = () => {
const[state, myReducer] = useReducer(reducer, {red: 0, green: 0, blue: 0});
const {red, green, blue} = state;
const reset = () => {
// function with I want to reset the value
}
return <View>
<Text>Random Color Generator</Text>
<ColorCounter
color="Merah"
onInc={() => myReducer({WarnaDiganti: 'red', jumlah: COLOR_INC})}
onDec={() => myReducer({WarnaDiganti: 'red', jumlah: -1 * COLOR_INC})}
/>
<ColorCounter
color="Hijau"
onInc={() => myReducer({WarnaDiganti: 'green', jumlah: COLOR_INC})}
onDec={() => myReducer({WarnaDiganti: 'green', jumlah: -1 * COLOR_INC})}
/>
<ColorCounter
color="Biru"
onInc={() => myReducer({WarnaDiganti: 'blue', jumlah: COLOR_INC})}
onDec={() => myReducer({WarnaDiganti: 'blue', jumlah: -1 * COLOR_INC})}
/>
<Button 
onPress={() => reset()}
title="Reset"
/>
<View
style= {{
height: 150,
width: 150,
backgroundColor : `rgb(${red},${green},${blue})` //I want to reset this with the reset button
}}
/>

</View>
};
export default SquareColorReduce;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

试试这个。我在化简器中添加了一个案例，将所有rgb值设置为零。

import React, {useReducer} from 'react';
import {Text, View, Button} from 'react-native';
import ColorCounter from '../components/ColorCounter';
const COLOR_INC = 15;
const reducer = (state, action) => {
switch(action.WarnaDiganti){
case 'red':
return state.red + action.jumlah > 255 || state.red + action.jumlah <= 0 ? state:{...state, red: state.red + action.jumlah};
case 'green':
return state.green + action.jumlah > 255 || state.green + action.jumlah < 0 ? state:{...state, green: state.green + action.jumlah};
case 'blue':
return state.blue + action.jumlah > 255 || state.blue + action.jumlah < 0 ? state:{...state, blue: state.blue + action.jumlah};
case 'reduceToZero':
return {red:0, green:0, blue:0};
default:
return state;
}
}
const SquareColorReduce = () => {
const[state, myReducer] = useReducer(reducer, {red: 0, green: 0, blue: 0});
const {red, green, blue} = state;
const reset = () => {
myReducer({WarnaDiganti:'reduceToZero'});
}
return <View>
<Text>Random Color Generator</Text>
<ColorCounter
color="Merah"
onInc={() => myReducer({WarnaDiganti: 'red', jumlah: COLOR_INC})}
onDec={() => myReducer({WarnaDiganti: 'red', jumlah: -1 * COLOR_INC})}
/>
<ColorCounter
color="Hijau"
onInc={() => myReducer({WarnaDiganti: 'green', jumlah: COLOR_INC})}
onDec={() => myReducer({WarnaDiganti: 'green', jumlah: -1 * COLOR_INC})}
/>
<ColorCounter
color="Biru"
onInc={() => myReducer({WarnaDiganti: 'blue', jumlah: COLOR_INC})}
onDec={() => myReducer({WarnaDiganti: 'blue', jumlah: -1 * COLOR_INC})}
/>
<Button 
onPress={reset}
title="Reset"
/>
<View
style= {{
height: 150,
width: 150,
backgroundColor : `rgb(${red},${green},${blue})` 
}}
/>

</View>
};
export default SquareColorReduce;