单击按钮时清除 TextInput 值 - React Native

Question

我正在使用 React Native，我有这些功能。 renderInputs() 生成一些输入字段，而getNextWord() 做了一些不相关的事情，而且它更新了状态。

getNextWord() {
   // do some stuff    
   this.setState({ set states here }); 
}

renderInputs() {
    var products = []
    // some code that generates a randomNumber
    for (let p = 0; p < randomNumber; p++){
       products.push (<TextInput defaultValue="" maxLength={1} key={p}  onChangeText={(text) => this.handleChange(text, p)}></TextInput> );
    }
    return products
}

在我的 render() 方法中，我显示了输入字段，并放置了 I 按钮，每次点击它都会触发 getNextWord() 函数。

<View>{this.renderInputs()}</View>
<Button onPress={this.getNextWord.bind(this)}>Get Next Word</Button>

现在，我可以正确看到输入字段，并且每次单击“获取下一个单词”按钮renderInputs() 都会生成一堆新的输入字段。

我的问题是，如果我在单击按钮后在其中一个输入字段中键入一个字符，我仍然会看到该字母，而我希望一开始我的所有输入字段都是空的。

我尝试使用defaultValue=""，但它似乎不起作用。 如果我这样做：defaultValue="A" 这是我运行应用程序后得到的。

示例：

第一次调用renderInputs()：

_ _ _ _ _ _ // 空输入（假设randomNumber 是 6）

然后我在第二个输入字段中输入一个字母，比如说“G”

_G _ _ _ _

一旦我点击“获取下一个单词”按钮renderInputs() 生成randomNumber（假设生成的随机数为 8）输入字段，这就是我得到的：

A G A A A A A A

但我想拥有：

A A A A A A A A

Answer 1

这是我的完整解决方案，然后是解释：

class MyComponent extends Component {

  // initial state
  state = {
    inputsNumber: this.randomInputs()
  }

  getNextWord() {
    // do some stuff
    const nextInputNumber = this.randomInputs()
    const inputsState = {}

    // set all inputs to A
    for (let p = 0; p < nextInputNumber) {
      inputsState[this.inputKey(p)] = 'A'
    }
    // set new random number of inputs
    this.setState({
      ...inputsState
      inputsNumber: nextInputNumber,
      // set rest of state here if needed ...
    });
  }

  renderInputs() {
    var products = []
    // some code that generates a randomNumber
    for (let p = 0; p < this.state.inputsNumber; p++){
       products.push(
        <TextInput
          maxLength={1}
          key={p}
          onChangeText={(text) => this.handleChange(text, p)}
          value={ this.state[this.inputKey(p)]}
        />
      );
    }
    return products
  }

  handleChange (text, p) {
    this.setState({
      [this.inputKey(p)]: text
    })
  }

  randomInput () {
    return Math.floor(Math.random() * 8) + 1 // or whatever random function
  }

  inputKey (p) {
    return 'input ' + p
  }
}

第一件事：
我不认为你想在渲染函数中生成随机数。这意味着每次render will get called 时，输入的数量都会发生变化，这将导致非常糟糕的用户体验，因为每次状态变化都会调用渲染（可能）。所以使用状态来跟踪这个数字：

import React, { Component } from 'react'
class MyComponent extends Component {

  // initial state
  state = {
    inputsNumber: this.randomInputs()
  }

  getNextWord() {
     // do some stuff
     this.setState({
      inputsNumber: this.randomInputs(),
      // set rest of state ...
    }); 
  }

  randomInput () {
    return Math.floor(Math.random() * 8) + 1 // or whatever random function
  }
}

现在要正确使用您的输入，您还需要bound their values to the state：

renderInputs() {
  var products = []
  for (let p = 0; p < this.state.inputsNumber; p++){
     products.push(
      <TextInput
        maxLength={1}
        key={p}
        onChangeText={(text) => this.handleChange(text, p)}
        value={this.state[this.inputKey(p)]}
      />
    );
  }
  return products
}

handleChange (text, p) {
  this.setState({
    [this.inputKey(p)]: text
  })
}

inputKey (p) {
  return 'input ' + p
}

现在要将所有输入“重置”为字母 A，我们需要对点击事件进行轻微修改：

getNextWord() {
  // do some stuff
  const nextInputNumber = this.randomInputs()
  const inputsState = {}

  // set all inputs to A
  // since we don't know how many inputs we have, we use the 'nextInputNumber' we just generated.
  for (let p = 0; p < nextInputNumber) {
    inputsState[this.inputKey(p)] = 'A'
  }
  // set new random number of inputs
  this.setState({
    ...inputsState
    inputsNumber: nextInputNumber,
    // set rest of state here if needed ...
  });
}

注意：我还没有测试过这个。如果某些东西不起作用，请创建一个小提琴，我会将其修改为一个工作示例