Question

在我的react native应用程序中，包含一个这样的形式的多个TextInputs：

{this.props.steps.map(step, index) => (
  <TextInput
    multiline={true}
    value={this.props.steps[index]}
    placeholder="Enter Step"
    onChangeText={value => this.handleFieldChange(value, index)}
    style={{ padding: 10, fontSize: 15 }}
  />
)}

在onChangeText函数中，使用redux编辑textinput的值，并以此方式验证表单：

handleFieldChange = async (value, index) => {
  var steps = this.props.steps;
  steps[index]= value;
  store.dispatch(updateSteps({ steps: steps }));
  this.validateForm();
};

这意味着TextInput的值不会立即更新，因此当用户快速键入时，它会闪烁。

有人可以建议如何使文本输入更流畅地更新吗？

Answer 1

经过一段时间的测试，我意识到与onChangeText函数无关。我发现TextInput仅在其内容超过组件的初始宽度后才闪烁。因此，使TextInput成为屏幕的整个宽度，并添加textAlign以使输入居中即可解决此问题。

var width = Dimensions.get("window").width

<TextInput
  multiline={true}
  value={this.props.steps[index]}
  placeholder="Enter Step"
  onChangeText={value => this.handleFieldChange(value, index)}
  style={{ width: width, padding: 10, fontSize: 15, textAlign: "center" }}
/>

如果TextInput是屏幕中的唯一组件，则不会发生此问题，而是仅当它嵌套在多个View中时（如此处的情况）。但是，我不知道此错误的直接原因是什么。

Answer 2

在渲染step中可以使用（不相关，我知道），并且可以使用key，我将对此进行更改

value={this.props.steps[index]}

在

value={step}
key={index}

正如已经评论过的那样，在handleFieldChange中，您正在以错误的方式更改props，这是

var steps = this.props.steps;

需要更改：

var steps = [...this.props.steps];

除此以外，我看不到为什么handleFieldChange需要成为async函数的证据，我将从其声明中删除async。

最后，问题的根源可能在updateSteps或validateForm中……

希望这会有所帮助。

使用Redux时反应本机Textinput Flickers

2 个答案: