```
有时候我们使用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
})
}
```
- uniapp引入vant
- 组件 vanButton 引用错误,仅支持 import 方式引入组件
- 构建npm
- 页面跳转
- 启动本地数据
- 有赞商城小程序使用教程
- 使用vant组件
- 购物车
- errno: -4082,
- buy
- qiang
- qiangbuy
- 设置数据
- React.createElement: type is invalid -- expected a string
- index.jsx: Expected corresponding JSX closing tag for <img>
- ReferenceError: FieldSet is not defined
- Identifier 'useState' has already been declared
- React does not recognize the classNam prop on a DOM element
- Invalid hook call. Hooks can only be called inside of the body of a function component
- created不能调用 setData
- TypeError: Cannot read property 'props' of undefined
- Missing semicolon
- form = Form.useForm(FormStrategy.View);
- useState is not a function
- useCallback is not defined
- Button is not defined
- form方案一
- props is not defined
- value_i
- super
- this_state
- Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
- Expected onClick listener to be a function, instead got a value of string type.
- getzhi is not defined
- this.setStatus is not a function
- this.state is null
- onClick_props
- fill
- slice深拷贝
- concat
- Cannot update during an existing state transition (such as within render). Render methods should be a pure function of props and state
- this.props.onClick is not a function
- The above error occurred in the <Skt> component
- The above error occurred in the <Bight> component
- onClick
- assignment to undeclared variable hispldy
- Each child in a list should have a unique "key" prop.
- Module not found: Error: Can't resolve './react' in
- 页面空白
- SyntaxError: index915.jsx: Unexpected token
- Identifier 'PropTypes' has already been de clared
- Identifier 'Profile' has already been decl ared
- JSX value should be either an expression or a quoted JSX text
- react__WEBPACK_IMPORTED_MODULE_9__.PropTypes is undefined
- SyntaxError: index1.jsx: Missing semicolon
- function map
- import from function
- 生成数组
- 使用两个循环来渲染出棋盘的格子,而不是在代码里写死
- Nothing was returned from render
- Uncaught TypeError: this is undefined
- if替代
- string refs. We recommend using useRef() instead
- Uncaught ReferenceError: useRef is not defined
- dangerouslySetInnerHTML
- handleClick
- 注释代码
- Invalid DOM property for. Did you mean htmlFor
- Received false for a non-boolean attribute className.
- style
- React.createClass is not a function
- '$' is not defined
- this.getDOMNode is not a function
- Autocomplete
- react and webpack
- react3\node_modules\babel doesn't exist
- babel-loader@8 requires Babel 7.x
- options has an unknown property 'progress'. These properties are valid:
- webpack cli
- Unable to load '@webpack-cli/serve' command
- npm install babel-preset-react-hmre --save-dev
- "dev": "webpack-dev-server --hot --mode development",
- npm run dev
- // Imports
- Error: Cannot find module 'webpack-cli/bin/config-yargs'
- super() outside of class constructor
- Error: Cannot find module 'webpack-cli/bin/config-yargs'two
- TypeError: Cannot read property 'length' of undefined
- configuration.module has an unknown property 'resolve'. These properties are valid
- Please use eslint-webpack-plugin
- Class Profile extends React.Component
- Uncaught ReferenceError: domcument is not defined
- Profile ...user
- Profile
- document.body.appendChild
- react.PropTypes is undefined
- ReferenceError: propTypes is not defined
- Warning: Component Profile declared PropTypes instead of propTypes. Did you misspell the property assignment?
- state Uncaught TypeError: this is undefined
- componentDidMount
- Component Hobby declared PropTypes instead of propTypes. Did you misspell the property assignment
- this.state.hobbis.map
- function Hobby
- 跳转为空白hobbis.push(this.refs.hobby)
- You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file
- 空白排查
- SyntaxError: ItemEditor/index.jsx: Unexpected token
- ...item
- Warning: Failed prop type: The prop onCancel is marked as required in ItemEditor, but its value is undefined
- Uncaught TypeError: _uuid2.default is undefined
- a标签的onclick事件触发请求