时间戳

首页 > 解决方案 > 添加到状态而不覆盖其中已经存在的内容（React Native）

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

问题描述

我有多个文本输入来创建一个 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" 
                  />

标签： javascriptreactjsreact-native

解决方案

当你不显示它们时，你应该避免使用它们。他们仍然会渲染并采取额外的处理能力。相反，您可以将其转换为函数。

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返回文本框更改为的值，然后重新渲染组件。值在渲染时设置文本框。

推荐阅读