浅谈React表单组件

深碍√TFBOYSˉ_ 2022-06-16 03:44 201阅读 0赞

表单组件不同于其他原生组件，可以通过用户交互发生变化，使响应用户交互的表单数据处理更加容易。

1、交互属性

表单组件支持几个受用户交互影响的属性：

1) value：用于 <input>、<textarea> 组件。

2) checked：用于type为 checkbox 或 radio 的 <input> 组件。

3) selected：用于 <option> 组件。

在 HTML 中，<textarea> 的值通过子节点设置；在 React 中<textarea> 的值通过 value设置。

表单组件可以通过 onChange 回调函数来监听组件变化。当用户做出以下交互时，onChange 执行并通过浏览器做出响应：

1) <input> 或 <textarea> 的 value 改变时。

2) <input> 的 checked 改变时。

3) <option> 的 selected 改变时。

注意:

对于 <input> and <textarea>， onChange 应该替代DOM内建的 [oninput][] 。

2、受控组件

一个有 value 属性的 <input> 是一个受控组件。

问题：用户输入在被渲染的元素里将没有作用，即输入框的值无法改变。

var MyBox = React.createClass({
    	render: function() {
    		return (
    			<input type="text" value="React"/>
    		);
    	}
    })
    ReactDOM.render(
    	<MyBox />,
    	document.getElementById("timeBox")
    );

解决：和state结合在一起，再绑定onChange事件，实时更新 value 值来响应用户输入：

3、不受控组件

一个没有 value 属性的 <input> 是一个不受控组件。

不受控组件维持自己的内部状态。

渲染出一个空值的输入框，用户输入将立即反应到元素上。

var MyBox = React.createClass({
    	render: function() {
    		return (
    			<input type="text"/>
    		);
    	}
    })
    ReactDOM.render(
    	<MyBox />,
    	document.getElementById("timeBox")
    );

和受控元素一样，使用 onChange 事件可以监听值的变化。

可以通过defaultValue给组件设置一个初始默认值，defaultValue属性是React内部实现的一个属性，类似于input的placeholder属性。

var MyBox = React.createClass({
    	render: function() {
    		return (
    			<input type="text" defaultValue="Hello react"/>
    		);
    	}
    })
    ReactDOM.render(
    	<MyBox />,
    	document.getElementById("timeBox")
    );

4、为什么要使用受控组件？

在 React 中使用 <input> 等表单组件时，会遇到了一个在 HTML 中没有的问题：它渲染一个具有特定初始值的输入框，当用户改变输入框的值时，节点的 value 属性将随之变化，但是 node.getAttribute('value') 还是会返回初始值。

与 HTML 不同，React 组件必须在任何时间点表现视图的状态，而不仅仅是在初始化时，因此需要使用受控组件。

5、<textarea>的value 属性

在 HTML 中， <textarea> 的值通常使用子节点设置：

<textarea>Hello react</textarea>

但是，由于 React 是 JavaScript，没有字符串限制，可以使用 \\n 实现换行。简言之，React 已经有 value、defaultValue 属性，<textarea> 组件的子节点扮演什么角色会模棱两可，因此，设置 <textarea> 值时不应该使用子节点：

6、<select> 的value 属性

HTML 中 <select> 通常使用 <option> 的 selected 属性设置选中状态；React 为了更方便地控制组件，采用以下方式代替：

<select value="Second">
        	<option value="First">First</option>
        	<option value="Second">Second</option>
        	<option value="Third">Third</option>
    </select>

如果是不受控组件，则使用 defaultValue。

给 value 属性传递一个数组，可以选中多个选项：<select multiple=\{true\} value=\{\['Second', 'Third'\]\}>。

[oninput]: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/oninput