react - jsx 语法之双向绑定的单选框实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="../lib/react.js"></script> <script src="../lib/react-dom.js"></script> <script src="../lib/babel.min.js"></script> <title>react - 事件</title> </head> <body> <div id="app"> </div> <script type="text/babel"> class Radiobox extends React.Component{ constructor(){ super() this.state={ radioval:"" } // 事件性能优化 this.handleRadio = this.handleRadio.bind(this) } render(){ let radioval = this.state.radioval return ( <div className="radioBox"> <label htmlFor="sex"></label> <input type="radio" value="boy" checked={radioval === "boy"} onChange={this.handleRadio.bind(this)}/>男<br/> <input type="radio" value="girl" checked={radioval === "girl"} onChange={this.handleRadio.bind(this)}/>女<br/> <p>您选择的性别是:{radioval}</p> </div> ) } handleRadio(e){ console.log("选择性别是： ",e.target.value) this.setState({ radioval: e.target.value }) } } ReactDOM.render( <Radiobox/>, document.getElementById('app') ) </script> </body> </html>
React - jsx 之 复选框实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="../lib/react.js"></script> <script src="../lib/react-dom.js"></script> <script src="../lib/babel.min.js"></script> <title>react - 复选框</title> </head> <body> <div id="app"></div> <script type="text/babel"> class Radiobox extends React.Component{ constructor(){ super() this.state={ hobbies: [] } // 事件性能优化this.handleCkeckedBox = this.handleCkeckedBox.bind(this) } render(){ let {radioval,hobbies} = this.state return ( <div className="radioBox"> <p className="hobby"></p> <label htmlFor=""><input type="checkbox" value="抽烟" onChange={this.handleCkeckedBox}/>抽烟</label> <label htmlFor=""><input type="checkbox" value="喝酒" onChange={this.handleCkeckedBox}/>喝酒</label> <label htmlFor=""><input type="checkbox" value="上网" onChange={this.handleCkeckedBox}/>上网</label> <label htmlFor=""><input type="checkbox" value="睡觉" onChange={this.handleCkeckedBox}/>睡觉</label> <ul className="box"> <p>你的爱好有 ： </p> { hobbies.map((ele)=>{ return ( <li className="hoibby" key={ele}>{ele}</li> ) }) } </ul> </div> ) } handleCkeckedBox(e){ let val = e.target.value let arr = this.state.hobbies let flag = arr.includes(val) if(flag){ let index = arr.indexOf(val) arr.splice(index,1) }else{ arr.push(val) } this.setState({ hobbies:arr }) } } ReactDOM.render( <Radiobox/>, document.getElementById('app') ) </script> </body> </html>
React - jsx 之 下拉框实现
<!DOCTYPE html> <html lang="en"> <head> <script src="../lib/react.js"></script> <script src="../lib/react-dom.js"></script> <script src="../lib/babel.min.js"></script> <title>react - jsx 下拉框</title> </head> <body> <div id="app"></div> <script type="text/babel"> class Radiobox extends React.Component{ constructor(){ super() this.state={ selectVal: "" } // 事件性能优化 this.handleSelected = this.handleSelected.bind(this) } render(){ let {selectVal} = this.state return ( <div className="radioBox"> <p>选中的是 ：{selectVal} </p> <select name="" id="" value={selectVal} onChange={this.handleSelected}> <option value="苹果">苹果</option> <option value="香蕉">香蕉</option> <option value="橘子">橘子</option> <option value="梨子">梨子</option> <option value="杏子">杏子</option> </select> </div> ) } handleSelected(e){ let val = e.target.value this.setState({ selectVal:val }) } } ReactDOM.render( <Radiobox/>, document.getElementById('app') ) </script> </body> </html>