React Study Notes 3

      <DivID= "Demo"></Div>        <Scripttype= "Text/babel">            varitemcomponent=React.createclass ({render:function (){                    return (                        <Li>{ This. Props.item}</li>                    )                    }            }); varlistcomponent=React.createclass ({render:function (){                    return (                        <ul>                            {                                 This. Props.listArr.map (function(item,index) {return <itemcomponent Key={Index} item={Item}/>                                })                            }                        </ul>                    )                    }            }); varfirstcomponent=React.createclass ({mixins:[react.addons.linkedstatemixin], getinitialstate:function (){                        return{mes: This. Props.value, Listarr: This. Props.listarr}}, Render:function (){                        return (                            <Div>                                <H1>{ This. Props.title}</h1>                                <input type="text"ref="Text_input"Valuelink={ This. Linkstate ("mes")} />/*introduction of React- with-Addons Library, and configure Mixins:[react.addons.linkedstatemixin], you can use Linkstate, similar to two-way data binding, in fact, the intrinsic implementation of the onchange event*/                                /*The ref attribute enables the current element to be found through This.refs.text_input*/                                <input type="Button"OnClick={ This. Additemhandle} value={ This. Props.sendname}/>                                /*This points to the problem, not understanding*/                                <P>{ This. State.mes}</p>                                <listcomponent Listarr= { This. State.listarr}/>

 /* use THIS.STATE.LISTARR here instead of THIS.PROPS.LISTARR because the state is mutable, to pass the changed value to the subassembly */                             </div>)}, Additemhandle:function (){                        varvalue=  This. Refs.text_input.value; varNEWARR=  This. State.listArr.concat ([value]) This. SetState ({Listarr:newarr})}});            varobj={title:'react', Sendname:'Submit', Value:"Please enter a message", listarr:[1,2,3,4,5,6,7,8]} reactdom.render (<firstcomponent {... obj}/,document.getElementById ("Demo"),                function() {Console.log ("Page Rendering Complete"); }            );/*JSX do not write a semicolon, will error*//*class is a keyword and is written classname*//*when you set a style, write the form sytle={xx:xxx}*/        </Script>

React Study Notes 3