React 统一添加表单元素值到state中

fengyehongWorld

已于 2022-02-24 07:49:46 修改

阅读量655

点赞数

分类专栏： # React 文章标签： react.js 前端 javascript

于 2022-02-24 07:48:52 首次发布

本文链接：https://blog.csdn.net/feyehong/article/details/123103216

版权

React 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

这篇博客讨论了React中如何处理多个输入框的数据，由于React不支持数据双向绑定，作者提出通过定义一个名为`getValue`的通用方法，结合每个输入框的`name`属性，来动态更新组件状态。在`render`方法中，为每个输入框设置`onChange`事件，调用`getValue`方法，以此实现手动的数据绑定。这种方法适用于大量输入框场景，简化了代码并保持组件状态的同步。

摘要由CSDN通过智能技术生成

React并没有像Vue和Angular中的数据双向绑定,因此在页面上输入的数据,需要手动添加到组件中
页面上存在很多输入框的话,可以定义一个共通方法,在每一个输入框中添加name属性,从而实现统一添加

class House extends Component {

	constructor(props) {
		super(props);
		this.state = {
	      // 价格
	      price: '',
	      // 面积
	      size: '',
	      // 地址
	      address: ''
	    }
	}
	
	/*
		通过getValue这个共通方法统一将所有入力表单元素的值保存到组件的状态中
		name: 当前的状态名
      	value: 当前输入值或者选中值
	*/
	getValue = (name, value) => {
    	// 获取到输入项的名称和值,更新到状态中
	    this.setState({
	      // 使用了ES6的属性表达式
	      [name]: value
	    })
  	}
	
	render() {
		const {
		  // 价格
	      price,
	      // 大小
	      size,
	      // 地址
	      address
	    } = this.state
	    
		return (
			<div>
				<input value={price} onChange={(val) => this.getValue('price', val)} />
	          	<input value={size} onChange={(val) => this.getValue('size', val)} />
	          	<input value={address} onChange={(val) => this.getValue('address', val)} />
			</div>
		)
	}
}