在 React Native 开发中，我们经常需要使用到表单输入框，例如文本框、选择框等等。React Native 提供了受控组件（controlled component）来实现对表单输入框值的控制，受控组件是指表单元素的值受组件的 state 或 props 控制，我们也可以在 onChange 事件中通过 setState 设置输入框的值。
然而，有时候我们会遇到一个很常见的问题，就是受控组件无法获取输入框的值。本篇文章将详细介绍这个问题出现的原因和解决方法。
问题出现的原因
当我们在受控组件中添加了一个 onChange 事件来设置输入框的值，我们会发现在输入框内输入文字时，输入框的值不能被正常地更新。
-- -------------------- ---- -------
----- ----- ------- --------------- -
------------------ -
-------------
---------- - -
------ ---
--
-
------------ - ----- -- -
---------------
------ -------------------
---
--
-------- -
------ -
------
---------- ------------------------ ---------------------------- --
-------------------------------
-------
--
-
-以上代码中，我们定义了一个 Input 组件并添加了一个受控组件，并在 onChange 中设置输入框的值，但是在文字输入完成后，我们会发现无法获取输入框的值，this.state.value 的值始终是空的。
这是因为在 React Native 中，TextInput 的 value 属性和 onChange 事件是不一样的。onChange 事件在输入框的值发生改变时被触发，但是这个事件并不会修改输入框的值，value 属性则是控制输入框的值，但是它并不能很好地与 onChange 事件配合使用。
解决方法
我们可以使用其他方法来获取输入框的值。以下是几个常见的解决方法：
1. 使用 ref
我们可以使用 ref 来获取 TextInput 的值：
-- -------------------- ---- -------
----- ----- ------- --------------- -
------------------ -
-------------
------------- - ------------------
---------- - -
------ ---
--
-
------------ - ----- -- -
----- ----- - -------------------
---------------
------
---
--
------------ - -- -- -
------------------ ------ -- -----------------------------
--
-------- -
------ -
------
---------- ------------------------ ---------------------------- ------------------- --
------- -------------- --------------------------- --
-------
--
-
-我们在 constructor 中使用 React.createRef() 来创建一个 ref，在 render 中将这个 ref 应用到 TextInput 组件中，并将 handleChange 修改为更新 state 中的值。在 handleSubmit 中，我们通过 this.inputRef.current.value 来获取输入框的值。
2. 使用回调函数
我们也可以使用回调函数来获取 TextInput 的值：
-- -------------------- ---- -------
----- ----- ------- --------------- -
------------------ -
-------------
---------- - -
------ ---
--
-
------------ - ----- -- -
----- ----- - -------------------
---------------
------
---
--
------------ - -- -- -
------------------ ------ -- ------------------
--
-------- -
------ -
------
---------- ------------------------ ---------------------------- --
------- -------------- ----------- -- -------------------- --
-------
--
-
-我们在 handleSubmit 中直接使用 this.state.value 来获取输入框的值。需要注意的是，由于 this.setState 是异步的，我们需要在 handleSubmit 中使用箭头函数来确保 this.state.value 指向正确的值。
3. 绑定 this
还有一种解决方案是在 constructor 中绑定 this，这样我们就可以在 handleSubmit 中直接使用 this.state.value，而不必使用箭头函数。修改代码如下：
-- -------------------- ---- -------
----- ----- ------- --------------- -
------------------ -
-------------
---------- - -
------ ---
--
----------------- - -----------------------------
----------------- - -----------------------------
-
------------------- -
----- ----- - -------------------
---------------
------
---
-
-------------- -
------------------ ------ -- ------------------
-
-------- -
------ -
------
---------- ------------------------ ---------------------------- --
------- -------------- --------------------------- --
-------
--
-
-我们在 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