<div id="root"></div> <script src='./babel.min.js'></script> <script src='./react.js'></script> <script src='./react-dom.js'></script> <script type="text/babel"> //react中的MVVM class App extends React.Component{ constructor(props){ super(props) this.favList=['吃饭','睡觉','打豆豆','游戏'] let fav=[] this.favList.map(val => { fav.push({checked:false,contnet:''}) return false }) this.state={ fav:fav } } addFav=(i,val)=>{ let isChecked = !this.state.fav[i].isChecked let content = isChecked ? val : '' this.setState({ fav:[...this.state.fav.slice(0,i), Object.assign({},this.state.fav[i],{isChecked,content}), ...this.state.fav.slice(i+1) ] }) } render(){ // debugger return ( <div> <span>爱好：</span> {this.favList.map((val,index)=>{ return( <label key={index}><input type='checkbox' onChange={()=>{this.addFav(index,val)}} checked={this.state.fav[index].isChecked}/>{val}</label> ) })} <p>你的爱好:{this.state.fav.map((val,index)=>{ return(<span key={index}>{val.content}</span>) })}</p> </div> ) } } ReactDOM.render(<App />,document.getElementById('root')) </script>
02-受控组件-Select
<div id="root"></div> <script src='./babel.min.js'></script> <script src='./react.js'></script> <script src='./react-dom.js'></script> <script type="text/babel"> //react中的MVVM class App extends React.Component{ constructor(props){ super(props) this.province=['上海','浙江'] this.city={'浙江':['杭州','嘉兴'], '上海':['杨浦','宝山'] } this.state={ city:'上海' } } addFav=(i,val)=>{ let isChecked = !this.state.fav[i].isChecked let content = isChecked ? val : '' this.setState({ fav:[...this.state.fav.slice(0,i), Object.assign({},this.state.fav[i],{isChecked,content}), ...this.state.fav.slice(i+1) ] }) } handleChangeCity=(e)=>{ this.setState({ city:e.target.value }) } render(){ // debugger //select的onchange会得到option的value值，如果option没写value则select Onchange得到的e.target.value就和option的text值一样 return ( <div> <select onChange={this.handleChangeCity}> {this.province.map((val,index)=>{ return ( <option key={index}>{val}</option> ) })} </select> <select> {this.city[this.state.city].map((val,index)=>{ return ( <option key={index}>{val}</option> ) })} </select> </div> ) } } ReactDOM.render(<App />,document.getElementById('root')) </script>
03-条件渲染
<div id='root'></div> <script src="./react.js"></script> <script src="./react-dom.js"></script> <script src="./babel.min.js"></script> <script type="text/babel"> class App extends React.Component{ constructor(props){ super(props) this.state={ islogging: false } } handleChange=()=>{ this.setState({ islogging:!this.state.islogging }) } render(){ return( <div> <input type="checkbox" checked={this.state.islogging} onChange={this.handleChange}/> <Greeting islogging={this.state.islogging} /> </div> ) } } class Greeting extends React.Component{ render(){ console.log(this.props) //?后面可以是子组件也可以是JSX，this.props.isloggg如果是数字0，被判定为false return ( <div> {this.props.islogging?'欢迎回来':'还没登陆！请登陆'} </div> ) } } ReactDOM.render(<App/>,document.getElementById('root')) </script>
04-选项卡
<style> .active{ color:red } .tab .tab-content{ width:200px; height:200px; border:10px solid #000; } </style> </head> <body> <div id='root'></div> <script src="./react.js"></script> <script src="./react-dom.js"></script> <script src="./babel.min.js"></script> <script type="text/babel"> class App extends React.Component{ constructor(props){ super(props) this.arr1=[ { title:'新闻', content:'新闻新闻新闻新闻新闻' }, { title:'财经', content:'财经财经财经财经财经' } ]; //选项卡2数据 this.arr2=[ { title:'娱乐', content:'娱乐娱乐娱乐娱乐娱乐' }, { title:'经济', content:'经济经济经济经济经济经济' }, { title:'军事', content:'军事军事军事军事军事军事' }, ]; } render(){ return( <div> <Tab tabDatas={this.arr1}/> <hr/> <Tab tabDatas={this.arr2}/> </div> );//render必须将组件的jsx返回 } } class Tab extends React.Component{ constructor(props){ super(props) this.state={ curIndex:0 } } changeIndex=(index)=>{ this.setState({ curIndex:index }) } render(){ return( <div> {/*选项卡按钮 父组件传给子组件函数的时候只需要changeIndex={this.changeIndex} 不需要想别的 一般变量什么的都是写在父组件上然后通过组件间传值运作 子组件要变index然后传回给父元素，这时候才考虑传参回调之类的 onClick={()=>this.props.changeIndex(index)} 不要在父组件上思考，例如changeIndex={()=>this.changeIndex} 这样是没有意义的 */} <TabButton tabDatas={this.props.tabDatas} curIndex={this.state.curIndex} changeIndex={this.changeIndex}></TabButton> {/*选项卡内容*/} <TabContent tabDatas={this.props.tabDatas} curIndex={this.state.curIndex} ></TabContent> </div> );//render必须将组件的jsx返回 } } class TabButton extends React.Component{ render(){ return( <div className="tab-btn"> {this.props.tabDatas.map((val,index)=>{ return (<input key={index} value={val.title} className={index==this.props.curIndex?"active":''} type="button" onClick={()=>this.props.changeIndex(index)}/>) })} </div> );//render必须将组件的jsx返回 } } class TabContent extends React.Component{ render(){ return( <div> {this.props.tabDatas[this.props.curIndex].content} </div> );//render必须将组件的jsx返回 } } ReactDOM.render(<App/>,document.getElementById('root')) </script>
05-受控组件--input
<div id='root'></div> <script src="./react.js"></script> <script src="./react-dom.js"></script> <script src="./babel.min.js"></script> <script type="text/babel"> //在HTML中，象<input>,<textarea>和<select>这类表单会维持自身状态，并根据用户输入进行更新。但在React中，可变的状态通常保存在组件的状态属性中，并且只能用setState()方法更新 //React中的受控组件即实现Vue中的v-model/Angular的ng-model指令功能 //输入元素：<input type="text"/><input type="checkbox"/> <select></select> class App extends React.Component{ constructor(props){ super(props) this.state={ msg:'' } } handleChange=(e)=>{ this.setState({ msg:e.target.value }) } submit=()=>{ alert(this.state.msg)//和输入框绑定的状态即是用户最新提交的 } render(){ const {msg}=this.state return (<form> {/*要把Input设置成受控组件，它才能会后面的p绑定显示。这时候要把值变为可变的，可控制的，就要赋值变量了，react中变量就用state就设置 受控组件要配合onChange 在react中v-model={msg}就能和下面的p绑定 react要设置在value里 同时还要配合onChange改变状态更新视图，onChange里e.target.value获得值 表单元素输入事件都是onChange事件，不是onInput事件 */} <input type="text" value={msg} onChange={this.handleChange}/> <p>{msg}</p> {/*如果不把Input设置成受控组件，也就是value变成变量，然后用onChange修改，那么button怎么拿Input里的值?不能用原生document.getElementBy....value来获取 用受控组件，提交的时候只要提交状态值msg就可以了 */} <button onClick={this.submit}>提交</button> </form>) } } ReactDOM.render(<App/>,document.getElementById('root')) </script>
06-受控组件--chekbox
<div id='root'></div> <script src="./react.js"></script> <script src="./react-dom.js"></script> <script src="./babel.min.js"></script> <script type="text/babel"> class App extends React.Component{ constructor(props){ super(props) this.state={ isChecked: true } } handleCheck=()=>{ //setState是异步操作，尽量用function this.setState(function(preState,props){ return{ isChecked:!preState.isChecked } }) } render(){ return( <div> {/* <input type="checkbox" v-model="msg"/> */} {/*value对checkbox无用，只有checked可以改变勾选 input输入元素接收外界输入时触发的事件是onChange事件 checkbox只是input的一种type */} <input type="checkbox" value={this.state.isChecked} checked={this.state.isChecked} onChange={this.handleCheck}/> {/*react中bool值无法显示*/} <p>{this.state.isChecked?'true':'false'}</p> </div> ) } } ReactDOM.render(<App/>,document.getElementById('root')) </script>
07-受控组件--多选chekbox
<div id='root'></div> <script src="./react.js"></script> <script src="./react-dom.js"></script> <script src="./babel.min.js"></script> <script type="text/babel"> class App extends React.Component{ constructor(props){ super(props) this.state={ fav:[] } } addFav=(e,text)=>{ console.log(e.target.checked,text) //判断当前元素是否选中 if(e.target.checked){ //如果选中则添加text到数组中 this.setState({ fav:[ ...this.state.fav, text ] }) }else{ // 如果没有选中则将text从数组中删除 // 先查找下标 var i=null this.state.fav.forEach((val,index)=>{ if(val==text){ i=index } }) if(i==null){ return } this.setState({ fav: [ ...this.state.fav.slice(0,i), ...this.state.fav.slice(i+1) ] }) } } render(){ return( <div> <span>爱好:</span> <label><input type="checkbox" onChange={(e)=>this.addFav(e,'吃饭')} />吃饭</label> <label><input type="checkbox" onChange={(e)=>this.addFav(e,'睡觉')}/>睡觉</label> <label><input type="checkbox" onChange={(e)=>this.addFav(e,'打豆豆')}/>打豆豆</label> <p>你的爱好:{this.state.fav}</p> </div> ) } } ReactDOM.render(<App/>,document.getElementById('root')) </script>
08-受控组件--select
<div id='root'></div> <script src="./react.js"></script> <script src="./react-dom.js"></script> <script src="./babel.min.js"></script> <script type="text/babel"> class App extends React.Component{ constructor(props){ super(props) this.state={ province:'sz' } } handleSelect=(ev)=>{ //修改状态 console.log(ev.target.value)//如果option没有设置value 则拿到的是option显示的值 如果<option value="sz">深圳</option>则拿到sz否则是深圳 this.setState({ province:ev.target.value }) } render(){ return( <div> {/*要想知道用户输入的是什么就要使用受控组件 onChange*/} <select onChange={this.handleSelect} value={this.state.province}> <option value='sz'>深圳</option> <option value='gz'>广州</option> <option value='tj'>天津</option> </select> <p>{this.state.province}</p> </div> ) } } ReactDOM.render(<App/>,document.getElementById('root')) </script>