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

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;

请注意我如何更改TextInput的onChangeText回调

因此，您在各自的onClick中设置firstText和secondText 。 每当状态更新时，组件都会重新渲染，并运行函数体中的所有代码。 每次运行都会创建常量enteredText ，并且始终是两个状态的最新连接。

希望这可以帮助！