添加到状态而不覆盖其中已经存在的内容（React Native）

Question

我有多个文本输入来创建一个 4 位数的 OTP 条目。一旦填满，我显然希望将它们全部组合起来，向我展示最终的 OTP。 例子： 2 4 3 6

虽然每个数字在不同的文本框中，但需要将它们组合起来，然后验证为 (2436)

我创建了一个名为otpEntry: '' 的状态，然后将其添加到所有四个文本框。问题是状态每次都被覆盖。相反，我想保持状态并添加下一个数字。例如，如果用户在移动到第二个框时输入 (2) 并进入 (4)，otpEntry 的状态应该是 (24) 而不是 4。我尝试按照以下方式进行操作，但没有成功。

                      <TextInput 
                  onChangeText={(otpEntry) => this.setState({otpEntry}), () => this.dig2.current.focus()} 
                  style={styles.otpInput}  
                  ref={this.dig1}
                  placeholder="X"
                  keyboardType="number-pad" 
                  />
                  <TextInput 
                  onChangeText={(otpEntry) => { this.setState(prevState => ({ otpEntry: prevState.otpEntry.concat(otpEntry) })) }, () => this.dig3.current.focus()} 
                  style={styles.otpInput}  
                  ref={this.dig2}
                  autoFocus = {this.state.otpdig2}
                  placeholder="X"
                  keyboardType="number-pad" 
                  />

Answer 1

我使用隐藏的 TextInput 字段解决了这个问题，该字段将其输入呈现为一种状态。然后使用单个 TextView 显示状态。这使事情变得非常简单明了

<TextInput style={{width: 0, height: 0}} keyboardType='numeric'autoFocus={true} onChangeText={(otpEntry) => this.setState({otpEntry})}/>
                  <Text style={styles.otpField}>{this.state.otpEntry}</Text>

Answer 2

您应该避免在不显示组件时使用它们。他们仍然会渲染并采取额外的处理能力。相反，你可以把它变成一个函数。

const [state, setState] = useState();

function append(input){
  let stateToChange = state;
  stateToChange = stateToChange.toString().append(input);
  setState(stateToChange);
}

如果此函数需要返回一个数字，您可以使用 parseInt() 和 parseFloat() 等函数。这是他们将要做什么的一个很好的例子：https://gomakethings.com/converting-strings-to-numbers-with-vanilla-javascript/

编辑前的旧答案：

你应该能够做到这一点。

<TextInput
  onChangeText={(text) => setState(text)}
  value={state}
/>

onChangeText 返回文本框更改为的值，然后重新渲染组件。值设置渲染时的文本框。