React Native，如何通过按下按钮将多个TextInput中的值获取到一个对象中

Question

我正试图将不同TextInput的值放入1个对象中。一般来说，我是React的新手，对状态还没有完全掌握。到目前为止，我的代码是这样的：

function App() {
const [enteredText, setEnteredText] = useState()
const [firstText, setFirstText] = useState()
const [secondText, setSecondText] = useState()
function textChange(enteredText) {
console.log(enteredText) //I want firstText and secondText here
}
return (
<View style={styles.container}>
<Text style={styles.header}>Great one!</Text>
<TextInput 
value={firstText}
onChangeText={text=>setEnteredText(text)}
style={styles.input} 
placeholder='1st text' />
<TextInput 
value={secondText}
onChangeText={text=>setEnteredText(text)}
style={styles.input} 
placeholder='2nd text' />
<Button
onPress={()=>textChange(enteredText)}
title='Submit'
color='orange' />
</View>
);
}
export default App;

Answer 1

您可以用useEffect收听firstText和secondText，并在每次更改时将它们放入enteredText中，如下所示：

function App() {
const [enteredText, setEnteredText] = useState();
const [firstText, setFirstText] = useState();
const [secondText, setSecondText] = useState();
function textChange(enteredText) {
console.log(enteredText); // will gives you {firstText : "whatever", secondText: "firstText"}
}
useEffect(() => {
setEnteredText({
firstText,
secondText,
});
}, [firstText, secondText]);
return (
<View style={styles.container}>
<Text style={styles.header}>Great one!</Text>
<TextInput
value={firstText}
onChangeText={(text) => setFirstText(text)}
style={styles.input}
placeholder="1st text"
/>
<TextInput
value={secondText}
onChangeText={(text) => setSecondText(text)}
style={styles.input}
placeholder="2nd text"
/>
<Button
onPress={() => textChange(enteredText)}
title="Submit"
color="orange"
/>
</View>
);
}

Answer 2

你真的很接近！您想要的(enteredText)实际上不应该是一个状态。它从逻辑上从第一个和第二个文本流，所以你可以让它是一个常量。

像这样：

function App() {
// changed the default state to be an empty string instead of
// the default undefined value. But either would work.
const [firstText, setFirstText] = useState("")
const [secondText, setSecondText] = useState("")
const enteredText = firstText + secondText
// I'd probably rename this function to "handleSubmit"
function textChange() {
console.log(enteredText)
}
return (
<View style={styles.container}>
<Text style={styles.header}>Great one!</Text>
<TextInput 
value={firstText}
onChangeText={text=>setFirstText(text)}
style={styles.input} 
placeholder='1st text' />
<TextInput 
value={secondText}
onChangeText={text=>setSecondText(text)}
style={styles.input} 
placeholder='2nd text' />
<Button
onPress={textChange}
title='Submit'
color='orange' />
</View>
);
}
export default App;

注意我如何更改TextInputs的onChangeText回调

因此，您将firstText和secondText设置为各自的onClicks。每当状态更新时，组件就会重新发送并运行函数体中的所有代码。常数enteredText将在每次运行时创建，并且始终是这两个状态的最新串联。

希望这能有所帮助！