zoukankan      html  css  js  c++  java
  • react表单

    //首先简单介绍受控组件,每个都要去change事件触发

    import React from 'react'
    
    class Form extends React.Component {
        constructor(props) {
            super(props);
            this.state = { 
                username:'',
                selectValue:'',
                content:''
            }
        }
        render() { 
            return (
                <div style={{padding:"10px"}}>
                    <form onSubmit={this.handleSubmit}>
                        <section style={{marginBottom:"10px"}}>
                            <label htmlFor="username">姓名:</label>
                            <input type="text" id="username" value={this.state.username} 
    onChange={this.changeHandle} /> </section> <section style={{marginBottom:"10px"}}> <label>水果:</label> <select value={this.state.selectValue} onChange={this.selectChange}> <option value="grapefruit">葡萄柚</option> <option value="lime">酸橙</option> <option value="coconut">椰子</option> <option value="mango">芒果</option> </select> </section> <section style={{marginBottom:"10px"}}> <label style={{verticalAlign:"top"}}>内容:</label> <textarea value={this.state.content} onChange={this.contentChange} /> </section> <input type="submit" value="提交"/> </form> </div> ); } handleSubmit=(e)=>{ e.preventDefault(); console.log(this.state.username); console.log(this.state.selectValue); console.log(this.state.content) console.log(e); } changeHandle=(e)=>{ //用户名 e.persist(); this.setState({ username:e.target.value }) } selectChange=(e)=>{ //水果 e.persist(); this.setState({ selectValue:e.target.value }) } contentChange=(e)=>{ e.persist();//这个是浏览器报错提示说加的,如果需要异步访问事件属性,应在事件上调用 event.persist()
    ,这种操作将从事件池中删除 SyncthesicEvent,并允许用户代码保留对事件的引用。
    //内容 this.setState({ content:e.target.value }) } } export default Form;

    //非受控组件

    import React from 'react'
    class NameForm extends React.Component {
        constructor(props) {
          super(props);
          this.username = React.createRef();
          this.password = React.createRef();
        }
        render() {
          return (
            <form onSubmit={this.handleSubmit}>
              <label>
                Name:
                <input type="text" ref={this.username} />
              </label>
              <label>
                password:
                <input type="text" ref={this.password} />
              </label>
              <input type="submit" value="Submit" />
            </form>
          );
        }
        handleSubmit=(event)=>{
            event.preventDefault();
            console.log(this.username.current.value)
            console.log(this.password.current.value)
        }
        
    }
    
    export default NameForm;
  • 相关阅读:
    bootstrap的验证和确认对话框
    Jquery.Datatables 基本创建方法
    DOM – (w3school)1.DOM 方法 + 2.DOM属性 + 3.DOM 元素
    Jquery.Datatables 基本设置的中文注解
    修改android studio中的avd sdk路径、avd sdk找不到的解决方案
    一个人至少是需要学习3种语言的
    Framework7:不会Objective-C,也能开发iOS7应用
    私人定制,十款最佳Node.js MVC框架
    PHP开发框架流行度排名:Laravel居首
    仅用移动开发服务:开发native应用
  • 原文地址:https://www.cnblogs.com/zhihou/p/13020994.html
Copyright © 2011-2022 走看看