<TextInput /> 与组件状态不一致答案

【问题标题】：<TextInput /> is not consistent with Component state<TextInput /> 与组件状态不一致
【发布时间】：2018-10-06 14:10:08
【问题描述】：

我正在用 React Native 构建一个简单的表单。我想要做的是，当输入字段的值发生变化时，我想更新状态（在这种情况下为phone）。输入字段的值始终等于状态的值。但是，当输入字段的值发生变化时，状态（phone）的值不会更新。提前致谢。这是代码。

import React from 'react';
import { StyleSheet, TextInput, View } from 'react-native';

const styles = StyleSheet.create({
  input: {
    padding: 5,
    borderColor: 'black',
    borderWidth: 1,
  },
});

export default class AddContactForm extends React.Component {
  state = {
    phone: 'sdfksd',
  };

  handlePhoneChange = (phone) => {
    this.setState({
      phone: '111',
    });
  };

  render() {
    return (
      <View style={{ paddingTop: 40 }}>
        <TextInput
          style={styles.input}
          value={this.state.phone}
          onChangeText={this.handlePhoneChange}
          keyboardType="numeric"
          placeholder="Phone"
        />
      </View>
    );
  }
}

更新：即使我在handlePhoneChange 中设置了phone，我仍然可以将文本字段显然更新为不同的值。这在状态和文本字段之间是不一致的。

【问题讨论】：

为什么将手机设置为111？无论用户输入什么，您是否希望您的文本输入具有“111”的值？
刚刚更新。请至少在发表评论之前先思考或尝试一下。
但是当您在文本字段中输入时，即使状态始终为111，它仍在更改中
@BillPham 如果您可以将其更改为我的答案，您的问题将得到解决！

标签： javascript reactjs react-native

【解决方案1】：

onChangeText 接受回调。所以在你的情况下，像这样将输入传递给你的函数

onChangeText={ val => this.handlePhoneChange(val)}

【讨论】：

是的，我做到了。这是一个类方法
嗯，是的，我同意这是一个类方法。但是您需要将 onChangeText 的值传递给您的函数。 @BillPham
@BillPham 不，不是。这是一个函数值属性。可打包性，他正在传递值，但他没有在实现中使用它。我不知道为什么，但这可以解释为什么它什么都不做
是的，因为 onChangeText 需要回调。因此，即使他不使用该值，现在也将调用该函数，并且将使用他的硬编码值设置状态
是的，我认为这是一个错误，当您以不同的方式编写 handlePhoneChange 而不是设置值 111 时，无论用户输入什么，似乎都没有问题。这个问题应该被关闭，因为我没有看到它的意义，他们可能应该在 Github 上报告这个错误

【解决方案2】：

像这样改变你的句柄函数。

handlePhoneChange = (电话) => { 这个.setState({ 电话：电话 }) }

【讨论】：