Question

如何更改TextInput时调用函数DoMath？

state = {
        foo: 2,
        bar: 3,
        Total: 0,
}

DoMath = () =>{

    var foo = this.state.foo;
    var bar = this.state.bar;

    this.state.Total= foo + bar;

    this.setState({Total: this.state.Total})

}



<TextInput
   onChangeText={(foo) => this.setState({foo})}
   value={this.state.foo}
   selectTextOnFocus
>
</TextInput>

我尝试过onChangeText={(foo) => this.setState({foo}); DoMath;}，但它无效。

Answer 1

您需要在大括号中包含多个语句的箭头函数体。如果您只是onChangeText={(foo) => this.setState({foo}); DoMath;}，那么这将被解释为两个陈述：

JS看到的是：

onChangeText={(foo) => { return this.setState({foo}); }; DoMath;}

因此在创建组件时会对DoMath进行评估，但在组件的文本发生更改时不会运行。

将其更改为：

onChangeText={(foo) => { this.setState({foo}); DoMath(); } }

它应该有用。

Answer 2

您标记为正确的答案可能会导致问题，setState为异步，DoMath依赖于更新后的值。 setState提供了一个回调函数，该函数将在状态更新后运行，因此当您调用DoMath时，您将获得更新的值：

handleChangeText = foo => this.setState({ foo }, this.DoMath)
...
...
onChangeText={this.handleChangeText}

也永远不要这样做：

this.state.Total= foo + bar;

this.setState({Total: this.state.Total})

//Do this
const Total= foo + bar;

this.setState({ Total })

Answer 3

语法应如下所示：

DoMath = ()=> {
 console.log(foo)
}

onChangeText={(foo=> {this.setState({ foo});},() => this.DoMath())}

Answer 4

这里更好的解决方案是使用TextInput的道具，称为onEndEditing

<TextInput
   onChangeText={(foo) => this.setState({foo})}
   onEndEditing={this.DoMath()}
   value={this.state.foo}
   selectTextOnFocus
/>

您可以根据自己的用例更改用法

在React Native中调用两个函数onValueChange

4 个答案: