React Native 受控组件无法获取输入值问题解决方法

在 React Native 开发中，我们经常需要使用到表单输入框，例如文本框、选择框等等。React Native 提供了受控组件（controlled component）来实现对表单输入框值的控制，受控组件是指表单元素的值受组件的 state 或 props 控制，我们也可以在 onChange 事件中通过 setState 设置输入框的值。

然而，有时候我们会遇到一个很常见的问题，就是受控组件无法获取输入框的值。本篇文章将详细介绍这个问题出现的原因和解决方法。

问题出现的原因

当我们在受控组件中添加了一个 onChange 事件来设置输入框的值，我们会发现在输入框内输入文字时，输入框的值不能被正常地更新。

class Input extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: '',
    };
  }

  handleChange = event => {
    this.setState({
      value: event.target.value,
    });
  };

  render() {
    return (
      <View>
        <TextInput value={this.state.value} onChange={this.handleChange} />
        <Text>{this.state.value}</Text>
      </View>
    );
  }
}

以上代码中，我们定义了一个 Input 组件并添加了一个受控组件，并在 onChange 中设置输入框的值，但是在文字输入完成后，我们会发现无法获取输入框的值，this.state.value 的值始终是空的。

这是因为在 React Native 中，TextInput 的 value 属性和 onChange 事件是不一样的。onChange 事件在输入框的值发生改变时被触发，但是这个事件并不会修改输入框的值，value 属性则是控制输入框的值，但是它并不能很好地与 onChange 事件配合使用。

解决方法

我们可以使用其他方法来获取输入框的值。以下是几个常见的解决方法：

1. 使用 ref

我们可以使用 ref 来获取 TextInput 的值：

class Input extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
    this.state = {
      value: '',
    };
  }

  handleChange = event => {
    const value = event.target.value;
    this.setState({
      value,
    });
  };

  handleSubmit = () => {
    console.log('Input value: ', this.inputRef.current.value);
  };

  render() {
    return (
      <View>
        <TextInput value={this.state.value} onChange={this.handleChange} ref={this.inputRef} />
        <Button title="Submit" onPress={this.handleSubmit} />
      </View>
    );
  }
}

我们在 constructor 中使用 React.createRef() 来创建一个 ref，在 render 中将这个 ref 应用到 TextInput 组件中，并将 handleChange 修改为更新 state 中的值。在 handleSubmit 中，我们通过 this.inputRef.current.value 来获取输入框的值。

2. 使用回调函数

我们也可以使用回调函数来获取 TextInput 的值：

class Input extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: '',
    };
  }

  handleChange = event => {
    const value = event.target.value;
    this.setState({
      value,
    });
  };

  handleSubmit = () => {
    console.log('Input value: ', this.state.value);
  };

  render() {
    return (
      <View>
        <TextInput value={this.state.value} onChange={this.handleChange} />
        <Button title="Submit" onPress={() => this.handleSubmit()} />
      </View>
    );
  }
}

我们在 handleSubmit 中直接使用 this.state.value 来获取输入框的值。需要注意的是，由于 this.setState 是异步的，我们需要在 handleSubmit 中使用箭头函数来确保 this.state.value 指向正确的值。

3. 绑定 this

还有一种解决方案是在 constructor 中绑定 this，这样我们就可以在 handleSubmit 中直接使用 this.state.value，而不必使用箭头函数。修改代码如下：

class Input extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: '',
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    const value = event.target.value;
    this.setState({
      value,
    });
  }

  handleSubmit() {
    console.log('Input value: ', this.state.value);
  }

  render() {
    return (
      <View>
        <TextInput value={this.state.value} onChange={this.handleChange} />
        <Button title="Submit" onPress={this.handleSubmit} />
      </View>
    );
  }
}

我们在 constructor 中绑定 this，将 handleChange 和 handleSubmit 都绑定到 this 上，并在 handleChange 中修改 state 中的值，在 handleSubmit 中直接使用 this.state.value 来获取输入框的值。

总结

本篇文章我们介绍了在 React Native 中受控组件无法获取输入框的值的问题，以及几种解决方法。希望能够帮助大家解决开发中遇到的问题，同时也让大家了解到了 state、props、ref、bind 等一些基本的 React Native 概念。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65a30120add4f0e0ffb179ad