Reactjs 清除按钮单击时的文本输入值-反应本机

我使用的是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
}

现在，我可以正确地看到输入字段，每次单击“获取下一个单词”按钮

renderInputs（）

都会生成一组新的输入字段

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

我尝试使用

defaultValue=“

，但似乎不起作用。 如果我这样做：

defaultValue=“A”

这是我运行应用程序后得到的结果

示例：

第一次调用

renderInputs（）

：

_空输入（假设

randomNumber

为6）

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

_G_uu_u_u

一旦我单击“获取下一个单词”按钮

renderInputs（）

生成

randomNumber

（假设生成的randomNumber为8）输入字段，我得到的是：

A G A A A A A A A A A A A A

但我想：

---

A

以下是我的完整解决方案，并附有说明：

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
  }
}

现在要正确使用您的输入，您还需要：

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
}

renderInputs（）{
var产品=[]
for（设p=0；p
);
}
退货
}
手册更改（文本，p）{
这是我的国家({
[this.inputKey（p）]：文本
})
}
输入键（p）{
返回“输入”+p
}

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

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 ...
  });
}

getNextWord（）{
//做点什么
const nextInputNumber=this.randomInputs（）
常量输入状态={}
//将所有输入设置为A
//因为我们不知道有多少输入，所以我们使用刚刚生成的“nextInputNumber”。
对于（设p=0；p

---

注意：我还没有测试过这个。如果有些东西不起作用，创建一个提琴，我将把它修改成一个工作示例

谢谢你的时间和答案，最后我用clear（0）方法解决了它。我猜你是编程新手，所以：）我不知道clear（0）是什么意思。很高兴你找到了解决办法！

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
}

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 ...
  });
}