``` 有時候我們使用a標簽，不希望用到a標簽的href去發送請求，因為可能需要再請求前做一些其他的js操作，所以希望通過onclick事件觸發請求， ``` ``` onClick={onClick} ``` ``` onClick={()=>onSelect(item.id)} ``` ``` <List items={items} onSelect={this.selectItem} /> ``` ``` selectItem(id){ console.log(1) if(id === this.state.selectedId){ return } this.setState({ selectedId:id, editing:false }) } ``` ``` src/components/Deskmark/index.jsx ``` ``` import React from 'react'; import CreateBar from '../CreateBar/index.jsx' import List from '../List/index.jsx' import ItemEditor from '../ItemEditor/index.jsx' import ItemShowLayer from '../ItemShowLayer/index.jsx' //import uuid from 'uuid'; const uuid = require('uuid'); class Deskmark extends React.Component{ constructor(props){ super(props) this.state = { items:[], selectId:null, editing:false } this.saveItem = this.saveItem.bind(this); this.selectItem = this.selectItem.bind(this); this.createItem = this.createItem.bind(this); this.editItem = this.editItem.bind(this); this.deleteItem = this.deleteItem.bind(this); this.cancelEdit = this.cancelEdit.bind(this); } saveItem(item){ let items = this.state.items item.id = uuid.v4() item.time = new Date().getTime() items = [...items,item] this.setState({ items }) } selectItem(id){ console.log(1) if(id === this.state.selectedId){ return } this.setState({ selectedId:id, editing:false }) } createItem(){ this.setState({ selectedId:null, editing:true }) } editItem({item}){ this.setState({ selectedId:null, editing:true }) } deleteItem(id){ let items = this.state.items items.splice(id,1); this.setState({ items }) } cancelEdit({item}){ this.setState({ selectedId:null, editing:true }) } render(){ let {items,selectedId,editing} = this.state let selected = selectedId && items.find(item => item.id === selectedId) let mainPart = editing ? <ItemEditor item={selected} onSave={this.saveItem} onCancel={this.cancelEdit} /> : <ItemShowLayer item={selected} onEdit={this.editItem} onDelete={this.deleteItem} /> // const items = [ // { // "id":'6c', // "title":"Hello", // "content":"# testing markdown", // "time":1458030208359 // }, // { // "id":"7c", // "title":"hello2", // "content":"#hello world", // "time":1458030208359 // } // ] //const currentItem = items[0]; return (<section className="deskmark-component"> <div className="container"> <div className="row"> <CreateBar onClick={this.createItem} /> <List items={items} onSelect={this.selectItem} /> {mainPart} </div> </div> </section>) } } export default Deskmark ``` ``` src/components/List/index.jsx ``` ``` import ListItem from '../ListItem'; import React from 'react' function List ({items},props){ const onSelect = props.onSelect // let select = ()=>{ // onSelect() // } items = items.map( item =>( <ListItem item={item} key={item.id} onClick={()=>onSelect(item.id)} /> ) ) return ( <div className="list-component col-md-4 list-group"> {items} </div> ) } export default List; ``` ``` src/components/ListItem/index.jsx ``` ``` import React from 'react'; import PropTypes from 'prop-types'; function ListItem({item}){ return ( <a href="#" className="list-group-item item-component"> <span> {item.time} </span> </a> ) } ListItem.propTypes = { item:PropTypes.object.isRequired, onClick:PropTypes.func.isRequired } export default ListItem ``` ``` ok ``` ``` <List items={items} onSelect={this.selectItem} /> ``` ``` function List ({items,onSelect}){ //const onSelect = props.onSelect // let select = ()=>{ // onSelect() // } items = items.map( item =>( <ListItem item={item} key={item.id} onClick={()=>onSelect(item.id)} /> ) ) return ( <div className="list-component col-md-4 list-group"> {items} </div> ) } ``` ``` function ListItem({item,onClick}){ return ( <a href="#" onClick={onClick} className="list-group-item item-component"> <span> {item.time} </span> </a> ) } ``` ``` 有時候我們使用a標簽，不希望用到a標簽的href去發送請求，因為可能需要再請求前做一些其他的js操作，所以希望通過onclick事件觸發請求， ``` ``` onClick={onClick} ``` ``` onClick={()=>onSelect(item.id)} ``` ``` <List items={items} onSelect={this.selectItem} /> ``` ``` selectItem(id){ console.log(1) if(id === this.state.selectedId){ return } this.setState({ selectedId:id, editing:false }) } ```