React 原生文本输入在使用 Redux 时闪烁

Question

在我的反应本机应用程序中，包含表单的多个文本输入，其呈现方式如下所示：

{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 编辑文本输入的值，并按如下方式验证表单：

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

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

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

Answer 1

经过一段时间的测试，我意识到这与onChangeText函数无关。我发现文本输入仅在其内容超过组件的初始宽度后闪烁。因此，使文本输入成为屏幕的整个宽度并添加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" }}
/>

如果文本输入是屏幕中的唯一组件，则不会发生此问题，但仅当它嵌套在多个视图中时，才会发生此问题，如此处的情况。但是，我不知道此错误的直接原因是什么。

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

希望这有帮助。

Answer 3

我遇到了同样的问题，原因是没有设置文本输入组件的宽度。将其设置为"100%"对我来说效果很好。使用另一个值也可以。