在 React 中获取输入字段的值

1. 在 React 中输入如何工作
2. 在 React 16 中获取输入字段的值
3. 使用钩子获取 React 中输入字段的值
4. 如何处理具有数十个输入的大型表单

处理用户输入是开发动态 React 应用程序的关键之一。使用用户输入可以让你响应他们的操作并提供卓越的用户体验。

在 React 中工作时，最好将用户输入存储在状态属性中以建立单一的事实来源。这使你可以轻松地与数据交互并在必要时对其进行操作。

每当状态发生变化时，React 会自动更新组件以反映最近的变化。

在 React 中输入如何工作

在继续之前，我们必须了解 React 决定重新渲染组件的时间和原因。

首先，当其内部状态发生变化时，应用程序 UI 会更新（重新渲染）。任何用户事件，例如选择不同的选项或选中/取消选中某个字段，都可以更改状态并导致重新渲染。

其次，当从父级收到的组件 props 发生更改时，会发生重新渲染。在某些情况下，父组件从其状态提供 prop 值。

React 使用 JSX，它看起来很像 HTML，但它的功能不同。

重要的是要记住，当你在 JSX 中创建一个 <input> 元素时，你不是在创建 HTML <input> 元素，而是一个与它非常相似的 React <input> 对象。它呈现类似于 HTML input 元素并模仿其事件处理界面，但在其他方面是独立的。

React 应用程序由 UI 元素组成，这些元素从组件状态中获取它们的值。如前所述，更改输入是更改状态以及页面上呈现的视觉元素的最常见方法之一。

然而，要记住的重要一点是，状态是 React 应用程序中唯一的真实来源。UI 界面具有次要作用。

在 React 16 中获取输入字段的值

自 React 16 发布以来，开发人员可以使用可读的类语法创建 React 类组件。请注意，你必须在构造函数中绑定它们或使用箭头语法调用它们才能使事件处理程序工作，如下例所示。

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      enteredValue: ""
    }
  }
  render() {
    console.log(this.state.enteredValue)
    return <input type="text"
                  onChange={(event) => this.setState({enteredValue: event.target.value})}>
           </input>;
  }
}

一般来说，使用箭头语法更具可读性和方便性。它还使应用程序更易于调试。

你可以自己查看 playcode 并看到每当你（也就是用户）在输入字段中输入新内容时，状态值都会更新，然后记录到控制台（用于演示目的）。

使用钩子获取 React 中输入字段的值

功能组件比类组件更容易编写和阅读。这种类型的组件只是一个接受 props 作为参数的函数。

直到几年前，功能组件还被称为无状态或哑组件，主要用于可视化数据。

自 React 16.8 以来，函数式组件获得了许多新功能的访问权限，包括钩子。现在开发人员可以使用 useState() 钩子来维护功能组件中的状态。

这个钩子允许你获取一个状态变量和更新它的函数。你不必再直接在功能组件中使用 .setState() API。

如果使用功能组件构建相同的应用程序，它的外观如下：

function App(props){
  let [inputValue, setInputValue] = useState("")
  console.log(inputValue)
  return <input type="text"
            onChange={(event) => setInputValue(event.target.value)}>
         </input>;
}

useState() 钩子的工作方式非常简单。一旦被调用，它就会返回一个分配给 inputValue 的状态变量和一个更新它的函数。

从可读性的角度来看，具有用于更新每个变量的独特函数可能是有益的。正如我们所见，setInputValue 有一个相当具有描述性的名称。

传递给 useState() 钩子（空字符串）的参数将用作 inputValue 状态变量的初始值。

如你所见，这个定义更加清晰，并且与类组件一样有效。当你需要一个只有几个变量来存储状态值的组件时，函数式组件通常是更好的选择。

尽管如此，在某些情况下，类组件是必要的，并且不同于功能组件。要了解有关差异的更多信息，请阅读 official react 文档。

如何处理具有数十个输入的大型表单

正如我们之前提到的，每个 UI 输入元素都需要一个状态变量来保存用户输入的值。表单有数十个甚至数百个输入项并不罕见。你应该为它们创建一个单独的状态变量吗？

解决方案简单，符合 React 的整体逻辑。你不应将这些输入放在一个大组件中，而应通过创建单独的小组件将它们分解成逻辑连接的部分。

然后你可以导入并使用它们来构建大型表单。这样，较小的组件只负责存储和维护一些输入。

以这种方式构建的应用程序更具可读性且更易于维护。其他处理你代码的开发人员会感谢你编写简单易懂的代码。