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()方法中，我显示了输入字段，并且我按下了每次单击它的按钮，它会触发getNextWord()函数。

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

现在，我可以正确地看到输入字段，每次我点击＆＃34;获取下一个字＆＃34;按钮renderInputs()生成一组新的输入字段。

我的问题是，如果我在其中一个输入字段中键入一个字符，一旦我点击按钮，我仍然会看到该字母，而我想在开头将所有输入字段都清空。

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

示例：

第一次调用renderInputs()：

_ _ _ _ _ _ //空输入（让我们说randomNumber是6）

然后我在第二个输入字段输入一个字母，让我们说＆＃34; G＆＃34;

_ G _ _ _ _

点击＆＃34;获取下一个字＆＃34;按钮renderInputs()生成randomNumber（让我们说生成的randomNumber为8）输入字段，这就是我得到的：

A G A A A A A A A

但我希望：

A A A A A A A A A

Answer 1

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

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

首先要做的事：
我不认为你想在渲染功能中生成随机数。这意味着每次render will get called，输入的数量都会改变，这会导致非常糟糕的用户体验，因为渲染（可能）会在每次状态更改时被调用。因此，使用状态来跟踪该数字：

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
}

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

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

现在来＆＃34;重置＆＃34;字母A的所有输入，我们需要对点击事件稍作修改：

{{1}}

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

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

1 个答案: