zoukankan      html  css  js  c++  java
  • 表单属性-react

    用<label>标签替代checkbox的点击样子,点击<label>实际上就是点击checkbox checkbox的checked值会跟着一起变

    <input type="checkbox" style={{display:'none'}} id={"checkbox"} onChange={this.handlerChange.bind(this)}></input> <label htmlFor={"checkbox"}></label>

    可以定义label的样式来取代checkbox难看的样式

    handlerChange用于检测checkbox的checked属性值的变化,以及改变组件状态

    一、表单事件

    React支持所有的HTML事件,这些事件遵循驼峰命名的约定,且会转成合成事件,这些事件是标准化的,提供饿了跨浏览器的一致接口。

    所有合成事件提供了event.target来访问触发事件的DOM节点。

    handleEventfunciton(syntheticEvent){

    var DOMNode=syntheticEvent.target;

    var newValue =DOMNode.value;

     

    }

    这是访问约束组件的值的最简单方式之一。

     

    Lavbel是表单元素中很重要的组件,通过Label可以明确地向用户传达你的要求,提升单选框和复选框的可用性。

     

    二、Label

     

    Labelfor属性有一个冲突的地方,因为使用JSX,这个属性会被转换成一个JavaScript对象,且作为第一个参数传递给组件的构造器,但由于for属于JavaScript的一个保留字,所以我们无法把它作为一个对象的属性。

    React中,与class变成了className类似,for也变成了htmlFor

    //JSX

    <labelhtmlFor ="name">Name :</label>

     

    //React.DOM.label({htmlFor:"Name:");

     

    渲染后:

    <label for = "name">Name<label>

     

    三、文本框和Select

    React<textarea/><select/>的接口做了一些修改,提升了一致性,让它们操作起来更容易。

    <textarea/>被改的更像<input/>了,允许我们设置valuedefaulteValue

     

    //非约束的

    <textareadefaultValue ="HelloWorld" />

     

    //约束的

    <textareavalue={this.state.helloTo } onChange ={this.handleChange} />

     

    <selectdefaultValue="8">

    <option value="A">First Option</option>

    <option value="B">Second Option</option>

    <option value= "C">Third Option</option>

    </select>

     

    //约束的

    <selectvalue ={this.state.helloTo} onchange={this.handleChange}>

    <option value="A">FirstOption </option>

    <option value="B">Second Option </option>

    <option value="C">Third Option</option>

    </select>

     

    React支持都选selce他,需要给valuedefauletValue传递一个数组,如:defaultValue={["A","B"]}.

     

    四、复选框和单选框

     

    复选框和单选框使用的则是完全不同的控制方式。

    HTML中,类似为checkbox或者radio<input/>的行为完全不一样,通常,复选框或者单选框的值是不变的,只有checked的状态会变化,要控制复选框或者单选框,就要控制他们的checked属性,你要可以在非约束的复选框或者单选框中使用defaultChecked

    checkbox 选中的设置方式
    设置一个checked属性,绑定和defaultChecked同样的值,这样在组件第一次渲染的时候显示的是defaultChecked,后面你的state改变defaultChecked无效,checked会生效。
    <input type="checkbox" defaultChecked={data.selected} checked={data.selected} onClick={clickHandler}/>

     

    五、多表单与change处理器

    在使用约束的表单组件时,没有愿意重复地为每一个组件编写change处理器。可以在React中重用一个事件处理器。

    示例一:通过.bind传递其他参数

     

    varMyForm =React.createClass({

    getIntialState:funciton(){

    return{

    given_name:"",

    family_name:""

    };

    },

    handleChange:funciton(name,event){

    var newState={};

    newState[name]=event.target.value;

    this.setState(newState);

    },

    submitHandler:funciton(event){

    event.preventDefault();

    var words=[

    "Hi",this.state.given_name,this.state.family_name

    ];

    alert(words.join(" "));

    },

    render:funciton(){

    return(

    <form onSubmit ={this.submitHandler}>

    <label htmlFor="given_name">givenName:</label>

    <br />

    <input

    type="text"

    name ="given_name"

    value ={this.state.given_name}

    onChange={this.handleChange.bind(this,'given_name')}/>

    <br/>

    <label htmlFor ="family_name">FamilyName:</label>

    <br/>

    <input

    type="text"

    name ="given_name"

    value ={this.state.given_name}

    onChange={this.handleChange.bind(this,'given_name')}/>

    <br/>

    </form>

    );

     

    }

    });

     

     

    六、Focus

    React实现了autoFocus属性,因此在组件第一次被挂载时,如果没有其他的表单聚焦时React就会把焦点放到这个组件对应的表单域中,例如:

    <input type="text" name="given_name"autoFocus=true/>

    还有一种方法就是调用DOMNodefocus方法,手动设置表单域聚焦。

  • 相关阅读:
    Lambda表达式、依赖倒置
    ASP.NET vNext 概述
    Uname
    RHEL4 i386下安装rdesktop【原创】
    Taxonomy of class loader problems encountered when using Jakarta Commons Logging(转)
    How to decompile class file in Java and Eclipse
    先有的资源,能看的速度看,不能看的,抽时间看。说不定那天就真的打不开了(转)
    Google App Engine 学习和实践
    【VBA研究】VBA通过HTTP协议实现邮件轨迹跟踪查询
    js正則表達式语法
  • 原文地址:https://www.cnblogs.com/qinyan20/p/8308511.html
Copyright © 2011-2022 走看看