一、受控组件和非受控组件的介绍
HTML表单在React中使用起来有所不同,官方文档是这么说的:
在 React 里,HTML 表单元素的工作方式和其他的 DOM 元素有些不同,这是因为表单元素通常会保持一些内部的 state。
要在React里面实现HTML表单,必须做一些特殊处理。官方文档里面有两种方式:受控组件和非受控组件
但大多数情况下,使用 JavaScript 函数可以很方便的处理表单的提交, 同时还可以访问用户填写的表单数据。实现这种效果的标准方式是使用“受控组件”。
有时使用受控组件会很麻烦,因为你需要为数据变化的每种方式都编写事件处理函数,并通过一个 React 组件传递所有的输入 state。当你将之前的代码库转换为 React 或将 React 应用程序与非 React 库集成时,这可能会令人厌烦。在这些情况下,你可能希望使用非受控组件, 这是实现输入表单的另一种方式。
由此可见,没有特殊需求,我们一般使用受控组件。本文阐述受控组件
二、受控组件
在 HTML 中,表单元素(如
<input>
、<textarea>
和<select>
)通常自己维护 state,并根据用户输入进行更新。而在 React 中,可变状态(mutable state)通常保存在组件的 state 属性中,并且只能通过使用 setState()来更新。我们可以把两者结合起来,使 React 的 state 成为“唯一数据源”。渲染表单的 React 组件还控制着用户输入过程中表单发生的操作。被 React 以这种方式控制取值的表单输入元素就叫做“受控组件”。
看不懂这些官方术语都没关系,我们以一个input表单元素为例。
普通的input表单元素:
<input />
一般的表单元素自己维护state,并根据用户输入进行更新。在使用react的时候,我们希望把可变状态放到组件内部的state属性中,并且通过state来更新。
我们下面来处理这个组件,使之变成受控组件
受控的input表单元素。
<input value={this.state.inputMsg} onChange={this.handleInput} />
首先input表单元素绑定了一个onChange事件,时刻监听表单输入的变化,handleInput方法就是讲input的值存到内部的state中。value就是从内部的state拿到用户的输入值。
具体的实现
下面的ChatApp实现了一个受控的input表单元素。MessageList是他的子组件,需要从ChatApp中的state获取用户输入的值:
import React from "react";
class MessageList extends React.PureComponent {
render() {
return <ul>{this.props.messages.map(msg => <li>{msg}</li>)}</ul>;
}
}
export default class ChatApp extends React.Component {
state = {
messages: [],
inputMsg: "",
};
handleInput = evt => {
this.setState({
inputMsg: evt.target.value,
});
};
handleSend = () => {
const text = this.state.inputMsg;
if (text) {
const newMessages = [...this.state.messages, text];
this.setState({
messages: newMessages,
inputMsg: "",
});
}
};
render() {
return (
<div>
<MessageList messages={this.state.messages} />
<div>
<input value={this.state.inputMsg} onChange={this.handleInput} />
<button onClick={this.handleSend}>Send</button>
</div>
<h2>{this.props.time.toLocaleString()}</h2>
</div>
);
}
}
参考文档:https://zh-hans.reactjs.org/docs/forms.html
参考视频:https://time.geekbang.org/course/detail/100009301-9438?utm_source=pinpaizhuanqu&utm_medium=geektime&utm_campaign=guanwang&utm_term=guanwang&utm_content=0511