react双向数据绑定，表单

最新推荐文章于 2024-03-01 17:59:49 发布

橙程橙

最新推荐文章于 2024-03-01 17:59:49 发布

阅读量313

点赞数

分类专栏： react 文章标签： react react双向数据绑定表单

本文链接：https://blog.csdn.net/rolinabc/article/details/96434027

版权

react 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

react中双向数据绑定的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="./js/react.js"></script>
	<script src="./js/react-dom.js"></script>
	<script src="./js/babel.min.js"></script>
	<script type="text/babel">
		class MyForm extends React.Component{
			constructor(props){
				super(props);
				this.state = {
					inputValue:'123',
					sexValue:'女',
					hobby:[
					{
					   name:'唱歌',
					   checked:false
					},{
						name:'跳舞',
					    checked:false
					},{
						name:'画画',
					    checked:false
					}]
				}
			}
			changeValue = (event)=>{
				this.setState(
				{
					inputValue:event.target.value
				})
				console.log(this.state.inputValue)
			}
			setInputValue = ()=>{
				this.setState(
					{
					inputValue:222
					}
				)
			}
			changeSexValue = (event)=>{
				this.setState({
					sexValue:event.target.value
				})
				console.log(this.state.sexValue)
			}
			changeHobby = (event)=>{
				this.setState({
					sexValue:event.target.value
				})
			}
			render(){
				return (
					<form>
						姓名：<input type="text" name="username" value={this.state.inputValue} onChange={this.changeValue} />
						性别： 男<input type="radio" name="sex" value={this.state.sexValue==="男"?true:false} onChange={this.changeSexValue} />
						女<input type="radio" name="sex" value={this.state.sexValue==="女"?true:false} onChange={this.changeSexValue} />
						<button onClick={this.setInputValue}>设置值</button>
						爱好：{
							this.state.hobby.map((item,index)=>{
								return (
									<span>
										<input type="checkbox"  name="hobby" value={item.name} checked={item.checked} key={index} onChange={this.changeHobby} />{item.name}
									</span>
								)
							})
						}
					</form>
				)
			}
		}
		ReactDOM.render(<MyForm />,document.getElementById('main'))
	</script>
</head>
<body>
	<div id="main"></div>
</body>
</html>