网络异常，图片无法展示
|
单选框
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello React!</title> <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script> <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script> <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script> <style> .item{ width: 20px; height: 20px; margin: 20px 0; border: 1px solid #666; } .item>div{ height: 20px; } .checked{ background: red; } </style> </head> <body> <div id="root"></div> <script type="text/babel"> class CheckBox extends React.Component { constructor(props) { super(props); this.state = { tagIndexList: [], value:[], index:null, arr: [ { item: "item1" }, { item: "item2" }, { item: "item3" }, { item: "item4" } ] }; this.handleClick = this.handleClick.bind(this); } handleClick(num,item){ this.setState({ index:num }) console.log(item); } render() { return ( <div> { this.state.arr.map((item, index) => { return ( <div key={item.item} className="item"> <div className={this.state.index===index?"checked":""} onClick={()=>this.handleClick(index,item.item)}></div><span>{item.item}</span> </div> ) }) } </div> ) } } ReactDOM.render( <CheckBox />, document.getElementById('root') ) </script> </body> </html>
网络异常，图片无法展示
|
复选框
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello React!</title> <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script> <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script> <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script> <style> .item{ width: 20px; height: 20px; margin: 20px 0; border: 1px solid #666; } .item>div{ height: 20px; } .checked{ background: red; } </style> </head> <body> <div id="root"></div> <script type="text/babel"> class CheckBox extends React.Component { constructor(props) { super(props); this.state = { tagIndexList: [], value:[], index:null, arr: [ { item: "item1" }, { item: "item2" }, { item: "item3" }, { item: "item4" } ] }; this.handleClick = this.handleClick.bind(this); } handleClick(num,item){ let items = this.state.value.slice(); let index = items.indexOf(item); index === -1 ? items.push(item) : items.splice(index, 1); this.setState(({ tagIndexList }) => ({ tagIndexList: tagIndexList.includes(num) ? tagIndexList.filter(item => item !== num) : [...tagIndexList, num], value: items })); console.log(items); } render() { return ( <div> { this.state.arr.map((item, index) => { return ( <div key={item.item} className="item"> <div className={this.state.tagIndexList.includes(index)?"checked":""} onClick={()=>this.handleClick(index,item.item)}></div><span>{item.item}</span> </div> ) }) } </div> ) } } ReactDOM.render( <CheckBox />, document.getElementById('root') ) </script> </body> </html>
