受控组件表单&不受控组件
表单里面的数据 根据State确定 在 HTML 中，表单元素如 <input>，<textarea> 和 <select>表单元素通常保持自己的状态，并根据用户输入进行更新。而在 React 中，可变状态一般保存在组件的 state(状态) 属性中，并且只能通过 setState()更新。
我们可以通过使 React 的 state 成为 “单一数据源原则”来结合这两个形式。然后渲染表单的 React 组件也可以控制在用户输入之后的行为。这种形式，其值由 React 控制的输入表单元素称为“受控组件”。
数据/状态的定义: 使用 this.state = {} 状态的修改: this.state.setState({})
input
// 定义类组件
class NameForms extends React.Component{
constructor(props){
super(props)
// 定义状态
this.state = {value:''}
// 函数可以产生独立作用域 ,在这里修改函数内部的指针指向 当前组件(类)
this.handleChange = this.handleChange.bind(this)
this.handleSubmit = this.handleSubmit.bind(this)
}
handleChange(e){
this.setState({value:e.target.value})
}
handleSubmit(e){
alert("A name was submitted : " + this.state.value)
e.preventDefault()
}
render(){
return (
<form onSubmit={this.handleSubmit}>
<label for="">
name : <input type="text" value={this.state.value} onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
)
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<!--react的核心库-->
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<!--react的与dom相关的一些功能-->
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!--将浏览器不支持的jsx语法转化为js语法-->
<script crossorigin src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root">
</div>
</body>
</html>
<script type="text/babel">
// 定义类组件
class NameForms extends React.Component{
constructor(props){
super(props)
// 定义状态
this.state = {value:''}
// 函数可以产生独立作用域 ,在这里修改函数内部的指针指向 当前组件(类)
// this.handleChange = this.handleChange.bind(this)
// this.handleSubmit = this.handleSubmit.bind(this)
this.fn = this.fn.bind(this)
}
handleChange(e){
this.setState({value:e.target.value})
console.log((this))
}
handleSubmit(e){
//alert("A name was submitted : " + this.state.value)
console.log(this.state.value)
e.preventDefault()
}
fn(){
console.log(this)
}
render(){
return (
<div>
<button onClick={this.fn}>点击</button>
<form onSubmit={this.handleSubmit}>
<label>
name : <input type="text" value={this.state.value} onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
</div>
)
}
}
ReactDOM.render(
<NameForms></NameForms>,
document.getElementById('root')
);
</script>textarea
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<!--react的核心库-->
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<!--react的与dom相关的一些功能-->
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!--将浏览器不支持的jsx语法转化为js语法-->
<script crossorigin src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root">
</div>
</body>
</html>
<script type="text/babel">
// 定义类组件
class NameForms extends React.Component{
constructor(props){
super(props)
// 定义状态
this.state = {value:''}
this.handleChange = this.handleChange.bind(this)
this.handleSubmit = this.handleSubmit.bind(this)
}
handleChange(e){
this.setState({value:e.target.value})
}
handleSubmit(e){
alert("A name was submitted : " + this.state.value)
e.preventDefault()
}
render(){
return (
<form onSubmit={this.handleSubmit}>
<label for="">
name : <textarea type="text" value={this.state.value} onChange={this.handleChange}></textarea>
</label>
<input type="submit" value="Submit" />
</form>
)
}
}
ReactDOM.render(
<NameForms></NameForms>,
document.getElementById('root')
);
</script>select(实现单选)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<!--react的核心库-->
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<!--react的与dom相关的一些功能-->
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!--将浏览器不支持的jsx语法转化为js语法-->
<script crossorigin src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root">
</div>
</body>
</html>
<script type="text/babel">
// 定义类组件
class NameForms extends React.Component{
constructor(props){
super(props)
// 定义状态
this.state = {value:''}
this.handleChange = this.handleChange.bind(this)
this.handleSubmit = this.handleSubmit.bind(this)
}
handleChange(e){
this.setState({value:e.target.value})
}
handleSubmit(e){
alert("A name was submitted : " + this.state.value)
e.preventDefault()
}
render(){
return (
<form onSubmit={this.handleSubmit}>
<label>
Pick your favorite La Croix flavor:
<br />
<select value={this.state.value} onChange={this.handleChange}>
<option value="grapefruit">Grapefruit</option>
<option value="lime">Lime</option>
<option value="coconut">Coconut</option>
<option value="mango">Mango</option>
</select>
</label>
<input type="submit" value="Submit" />
</form>
)
}
}
ReactDOM.render(
<NameForms></NameForms>,
document.getElementById('root')
);
</script>select(实现多选)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<!--react的核心库-->
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<!--react的与dom相关的一些功能-->
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!--将浏览器不支持的jsx语法转化为js语法-->
<script crossorigin src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root">
</div>
</body>
</html>
<script type="text/babel">
// 定义类组件
class NameForms extends React.Component{
constructor(props){
super(props)
// 定义状态
this.state = {value:''}
this.handleChange = this.handleChange.bind(this)
this.handleSubmit = this.handleSubmit.bind(this)
}
handleChange(e){
this.setState({value:e.target.value})
}
handleSubmit(e){
alert("A name was submitted : " + this.state.value)
e.preventDefault()
}
render(){
return (
<form onSubmit={this.handleSubmit}>
<label>
Pick your favorite La Croix flavor:
<br />
<select multiple value={["grapefruit","lime"]} onChange={this.handleChange}>
<option value="grapefruit">Grapefruit</option>
<option value="lime">Lime</option>
<option value="coconut">Coconut</option>
<option value="mango">Mango</option>
</select>
</label>
<input type="submit" value="Submit" />
</form>
)
}
}
ReactDOM.render(
<NameForms></NameForms>,
document.getElementById('root')
);
</script>file(文件上传)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<!--react的核心库-->
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<!--react的与dom相关的一些功能-->
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!--将浏览器不支持的jsx语法转化为js语法-->
<script crossorigin src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root">
</div>
</body>
</html>
<script type="text/babel">
// 定义类组件
class NameForms extends React.Component{
constructor(props){
super(props)
// 定义状态
this.state = {value:''}
this.handleChange = this.handleChange.bind(this)
this.handleSubmit = this.handleSubmit.bind(this)
}
handleChange(e){
this.setState({value:e.target.value})
}
handleSubmit(e){
// alert("A name was submitted : " + this.fileInput.files[0].name)
console.log(this.fileInput.files)
e.preventDefault()
}
// 在 React 中，一个 <input type =“file”/> 和一个普通的 <input /> 类似，但有一个重要的区别：它是只读的(read-only)。
// （您不能以编程方式设置值。）相反，你应该使用 File API 与文件进行交互。
// 使用一个 ref 来访问提交处理程序中的文件
render(){
return (
<form onSubmit={this.handleSubmit}>
<label>
Upload file:
<input type="file" ref={input => {
this.fileInput = input;
}}/>
</label>
<br />
<button type="submit">Submit</button>
</form>
)
}
}
ReactDOM.render(
<NameForms></NameForms>,
document.getElementById('root')
);
</script>不受控组件
在大多数情况下,推荐使用受控组件来实现表单 , 也就是说, 表单的数据由 react组件负责处理
在表单处理的过程中, 表单的数据也可以由dom元素进行处理, 称为不受控表单
在不受控组件中, 表单元素的操作使用dom操作来完成
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<!--react的核心库-->
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<!--react的与dom相关的一些功能-->
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!--将浏览器不支持的jsx语法转化为js语法-->
<script crossorigin src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>
<script type="text/babel">
class Parent extends React.Component{
constructor(props){
super(props)
this.handleSubmit = this.handleSubmit.bind(this)
}
handleSubmit(e){
console.log(this)
console.log(this.inpEle.value)
// 阻止默认提交事件
e.preventDefault()
}
render(){
return (
<form onSubmit={this.handleSubmit}>
<input type="text" ref={(inp)=>{this.inpEle=inp}}/>
<input type="submit" value='submit' />
</form>
)
}
componentDidMount(){
console.log(this.inpEle)
}
}
ReactDOM.render(
<Parent>Hello, world!</Parent>,
document.getElementById('root')
);
</script>defaultValue(表单的默认值, 在表单中,通过defaultValue设置表单的默认值)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<!--react的核心库-->
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<!--react的与dom相关的一些功能-->
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!--将浏览器不支持的jsx语法转化为js语法-->
<script crossorigin src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>
<script type="text/babel">
class Parent extends React.Component{
constructor(props){
super(props)
this.handleSubmit = this.handleSubmit.bind(this)
}
handleSubmit(e){
console.log(this)
console.log(this.inpEle.value)
// 阻止默认提交事件
e.preventDefault()
}
render(){
return (
<form onSubmit={this.handleSubmit}>
<input type="text" defaultValue="111" ref={(inp)=>{this.inpEle=inp}}/>
<input type="submit" value='submit' />
</form>
)
}
componentDidMount(){
console.log(this.inpEle)
}
}
ReactDOM.render(
<Parent>Hello, world!</Parent>,
document.getElementById('root')
);
</script>受控表单到不受控表单的转化
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<!--react的核心库-->
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<!--react的与dom相关的一些功能-->
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!--将浏览器不支持的jsx语法转化为js语法-->
<script crossorigin src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root">
</div>
</body>
</html>
<script type="text/babel">
// 受控组件 -- 不能输入
ReactDOM.render(<input value="hi" readOnly/>,
document.getElementById("root"));
// 受控组件转化为不受控组件
var bool = ""
setTimeout(function() {
ReactDOM.render(<input value={bool} />,
document.getElementById("root"));
}, 10000);
</script>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018.06.26 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读