react-小案例，收集表单数据
Posted czh64
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了react-小案例，收集表单数据相关的知识，希望对你有一定的参考价值。
小案例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>work7</title> <script src="../js/react.development.js"></script> <script src="../js/react-dom.development.js"></script> <script src="../js/prop-types.js"></script> <script src="../js/babel.min.js"></script> <script type="text/babel"> /* 问题1：数据保存哪个组件？ 如果数据是某个组件需要，就直接给该组件，如果是某些组件需要，就给共同的父亲 问题2：在子组件中改变父组件的状态？ 子组件中不能直接改变父组件的状态 状态在哪个组件更新状态的行为就应该定义在哪个组件 解决方案：父组件定义函数，传递给子组件，子组件调用 组件化编写功能的流程： 1.拆分组件（定义n个组件） 2.实现静态组件（给组件内实现render，没有动态数据，没有交互） 3.实现动态组件 1）.实现初始化数据动态显示 2）.实现交互功能 */ class App extends React.Component{ constructor(props){ super(props) this.state={ //初始化数据 todos:[‘DO‘,‘dujingxiu‘,‘eee‘] } this.addTodo=this.addTodo.bind(this) } addTodo(todo){ //方法也是一种数据 //更新数据必须更新状态 const {todos}=this.state todos.unshift(todo) //更新状态 this.setState({todos}) } render(){ const {todos}=this.state return( //return 里面只能有一个根标签 <div> <h1>Simple TODO List</h1> <Add count={todos.length} addTodo={this.addTodo}/> <List todos={todos}/> </div> ) } } class Add extends React.Component{ constructor(props){ super(props) this.add=this.add.bind(this) } add(){ //1.读取输入的数据 const todo=this.todoinput.value.trim() //2.检查合法性 if(!todo){ //如果字符串为空 return }else{ //3.添加内容 this.props.addTodo(todo) //4.清除输入 this.todoinput.value=‘‘ } } render(){ return( <div> <input type="text" ref={input=>this.todoinput=input}/> <button onClick={this.add}>add{this.props.count+1}</button> </div> ) } } class List extends React.Component{ render(){ const {todos}=this.props return ( <ul> {todos.map((todo,index)=><li key={index}>{todo}</li>)} </ul> ) } } List.propTypes={ todos:PropTypes.array.isRequired } Add.propTypes={ count:PropTypes.number.isRequired, addTodo:PropTypes.func.isRequired } ReactDOM.render(<App />,document.getElementById("example")) </script> </head> <body> <div id="example"></div> </body> </html>
收集表单数据：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>work8</title>
<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<script src="../js/prop-types.js"></script>
<script src="../js/babel.min.js"></script>
<script type="text/babel">
class LoginForm extends React.Component{
constructor(props){
super(props)
this.state={
pwd:‘‘
}
this.handleSubmit=this.handleSubmit.bind(this)
this.handleChange=this.handleChange.bind(this)
}
handleSubmit(event){
//阻止事件的默认行为，这里事件的默认行为是 提交
event.preventDefault()
const name=this.nameInput.value
const {pwd}=this.state
alert(`准备提交的用户名为：${name}；密码为：${pwd}`)
}
//onChange事件：这个方法在原生中input的onChange是在失去焦点的时候触发，而在react的onChange是输入内容就会调用方法
handleChange(event){
//读取输入的值
const pwd=event.target.value
//更新pwd的状态
this.setState({pwd})
}
render(){
return(
<form action="/test" onSubmit={this.handleSubmit}>
用户名：<input type="text" ref={input=>this.nameInput=input}/>
密码：<input type="password" value={this.state.pwd} onChange={this.handleChange}/>
<input type="submit" value="登录"/>
</form>
)
}
}
ReactDOM.render(<LoginForm/>,document.getElementById("example"))
</script>
</head>
<body>
<div id="example"></div>
</body>
</html>
包含表单的组件分类：
受控组件：表单项输入数据能自动收集成状态（例如上面的密码框）
非受控组件：需要时才动手读取表单输入框中的数据（例如上面的姓名框）
以上是关于react-小案例，收集表单数据的主要内容，如果未能解决你的问题，请参考以下文章