Question

我正在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>
    )
  }
}

更新：即使我在phone中设置handlePhoneChange，我仍然可以明显地将文本字段更新为其他值。这在州和文本字段之间是不一致的。

Answer 1

onChangeText进行回调。因此，在您的情况下，将输入传递给您的函数

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

Answer 2

像这样改变你的手柄功能。

handlePhoneChange =（phone）=＆gt; { this.setState（{ 电话：电话 }） }

<textinput>与Component状态不一致

2 个答案: