受控组件与非受控组件

针对于表单元素而言，如果数据由组件本身进行维护，让react的state状态成为唯一数据源的话，那就是受控组件。
非受控组件不需要写事件处理函数，由DOM自身进行维护。一般通过Ref进行DOM的绑定。

受控组件：在HTML中，表单元素通常自己维护 state，并根据用户输入进行更新。而在 React 中，可变状态通常保存在组件的 state 属性中，并且只能通过使用 setState()来更新。

我们可以把两者结合起来，使 React 的 state 成为“唯一数据源”。渲染表单的 React 组件还控制着用户输入过程中表单发生的操作。被 React 以这种方式控制取值的表单输入元素就叫做“受控组件”。

受控组件示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入react的相关插件 -->
    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/babel.js"></script>
    <title>Document</title>
</head>

<body>
    <div id="box"></div>
    <script type="text/babel">

        class App extends React.Component {
            constructor() {
                super()
                this.state = {
                    value: "1"
                }
            }
            handleChange = (e) => {
                this.setState({
                    value: e.target.value
                })
            }
            render() {
                return (
                    <div>
                        <input type="text" value={this.state.value} onChange={this.handleChange} />
                        <p>{this.state.value}</p>
                    </div>
                )
            }
        }
        ReactDOM.render(<App />, document.getElementById("box"))
    </script>
</body>

</html>

由于在表单元素上设置了 value 属性，因此显示的值将始终为 this.state.value，
这使得 React 的 state 成为唯一数据源。由于 handlechange 在每次按键时都会执行并更新 React 的 state，
因此显示的值将随着用户输入而更新。

效果：
在这里插入图片描述

非受控组件：这时表单数据将交由 DOM 节点来处理。

要编写一个非受控组件，而不是为每个状态更新都编写数据处理函数，你可以使用 ref 来从 DOM 节点中获取表单数据。

非受控组件示例：

class App extends React.Component{
    constructor(props){
    	super(props);
    }
    handleSubmit = e=>{
    	//阻止表单默认提交事件
    	e.preventDefault();
    }
    render(){
        return (
            <form onSubmit={this.handleSubmit}>
                <label>
                	<input type="text" ref={el=>this.input=el} />
                </label>
                <input type="submit" value="Submit" />
            </form>
         )
      }
 }
 ReactDOM.render(<App />,document.getElementById("box"));

效果：
在这里插入图片描述
总结：

受控组件 vs 非受控组件

React 有两种不同的方式来处理表单输入。

如果一个 input 表单元素的值是由 React 控制，就其称为受控组件。当用户将数据输入到受控组件时，会触发修改状态的事件处理器，这时由你的代码来决定此输入是否有效（如果有效就使用更新后的值重新渲染）。如果不重新渲染，则表单元素将保持不变。

一个非受控组件，就像是运行在 React 体系之外的表单元素。当用户将数据输入到表单字段（例如 input，dropdown 等）时，React 不需要做任何事情就可以映射更新后的信息。然而，这也意味着，你无法强制给这个表单字段设置一个特定值。

在大多数情况下，你应该使用受控组件。

别来…无恙

发布了31 篇原创文章 · 获赞 4 · 访问量 992

私信关注