码迷,mamicode.com
首页 > 其他好文 > 详细

react-小案例,收集表单数据

时间:2019-12-26 13:02:04      阅读:75      评论:0      收藏:0      [点我收藏+]

标签:数据保存   har   state   字符串   word   unshift   自动   lse   app   

小案例代码:

<!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-小案例,收集表单数据

标签:数据保存   har   state   字符串   word   unshift   自动   lse   app   

原文地址:https://www.cnblogs.com/czh64/p/12101153.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!