如何使用 React Hooks 更改多个条目?

Question

如何实时动态更改其他条目？

当我输入value1时，我想立即更改value2和value3，然后与其他字段相同。

我知道我应该使用 useEffect，但是当我想到如何同时在几个不同的输入上执行此操作时，我对此表示怀疑。

我试试这个...

export default function Performance() {
const myVariableProp = 20;
const [value1, setValue1] = useState('');
const [value2, setValue2] = useState('');
const [value3, setValue3] = useState('');
// on change text value1 dynamically change other values
useEffect(() => {
setValue2(value1 * 4);
setValue3(value1 / 4);
}, [myVariableProp, value1]);
// on change text value2 dynamically change other values
useEffect(() => {
setValue1(4.2 / 32500);
setValue3(value1 / myVariableProp);
}, [myVariableProp, value1]);
// on change text value3 dynamically change other values
useEffect(() => {
const math = myVariableProp * value2;
setValue1(math);
setValue2(value1 * myVariableProp * 4.2);
}, [myVariableProp, value2, value1]);
return (
<View>
<Text>Performance</Text>
<TextInput
value={value1}
onChangeText={setValue1}
style={{backgroundColor: '#e3e3e3'}}
/>
<TextInput
value={value2}
onChangeText={setValue2}
style={{backgroundColor: '#f3e3e3'}}
/>
<TextInput
value={value3}
onChangeText={setValue3}
style={{backgroundColor: '#c3e3e3'}}
/>
</View>
);
}

Answer 1

为什么不这样

const setValue1Handler =(newValue1) => {
setValue1(newValue1);
setValue2(newValue1 * 4);
setValue3(newValue1 / 4);
}
<TextInput
value={value1}
onChangeText={setValue1Handler}
style={{backgroundColor: '#e3e3e3'}}
/>

其他功能也是如此:)

如有疑问，请随时发表评论

Answer 2

作为 useImpact 的第一个参数传递的函数，可以在某些变量更改时执行。这些变量作为useEffect的第二个参数在数组中传递。例如：

// on change text value1 dynamically change other values
useEffect(() => {
setValue2(value1 * 4);
setValue3(value1 / 4);
}, [value1]);
// on change text value2 dynamically change other values
useEffect(() => {
setValue1(4.2 / 32500);
setValue3(value1 / myVariableProp);
}, [value2]);
//etc...

https://reactjs.org/docs/hooks-reference.html#conditionally-firing-an-effect