Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
171 views
in Technique[技术] by (71.8m points)

javascript - 如何使用React Hooks更改多个条目?(How to change multiple entries with React Hooks?)

How to dynamically change other entries in real time?(如何实时动态更改其他条目?)

When I type value1 , I want to instantly change value2 and value3 and then the same with the other fields.(当我键入value1 ,我想立即更改value2value3 ,然后与其他字段相同。) I know I should use useEffect but when I think of how to do this on several different inputs simultaneously I am in doubt.(我知道我应该使用useEffect,但是当我想到如何同时在多个不同的输入上执行此操作时,我会感到怀疑。) I try this ...(我尝试这个...) 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> ); }   ask by Jonathan Reis translate from so

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

Why not in this way(为什么不这样)

const setValue1Handler =(newValue1) => { setValue1(newValue1); setValue2(newValue1 * 4); setValue3(newValue1 / 4); } <TextInput value={value1} onChangeText={setValue1Handler} style={{backgroundColor: '#e3e3e3'}} /> And the same for the other functions :)(和其他功能相同:)) For questions feel free to comment(如有疑问,请随时发表评论)

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...