新建react项目
create-react-app
,新建react项目。
当前,create-react-app创建的react项目默认使用的是react@18。本项目要使用react17,因此手动降版本,npm install --save react@17 react-dom@17
。
实现求和案例
实现求和案例,代码变更涉及的文件有:
- 入口文件index.js
- 入口组件App.js
- 求和组件components/Counter/index.jsx
入口文件index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render( <App />,document.getElementById("root"));
App.js(入口组件)
import React, { Component } from 'react'
import Counter from "./components/Counter";
export default class App extends Component {
render() {
return (
<div>
<Counter/>
</div>
)
}
}
Counter/index.jsx(Counter组件)
import React, { Component } from 'react'
export default class Counter extends Component {
state = {count:0}
increment = () => {
const {value} = this.selectEl;
const {count} = this.state;
this.setState({count:count+Number(value)});
}
decrement = () => {
const {value} = this.selectEl;
const {count} = this.state;
this.setState({count:count-Number(value)});
}
incrementOdd = () => {
const {value} = this.selectEl;
const {count} = this.state;
if(count % 2 !== 0){
this.setState({count:count+Number(value)});
}
}
incrementWait = () => {
const {value} = this.selectEl;
const {count} = this.state;
setTimeout(() => {
this.setState({count:count+Number(value)});
},1000)
}
render() {
const {count} = this.state;
const {increment,decrement,incrementOdd,incrementWait} = this;
return (
<div>
<h2>当前求和为{count}</h2>
<select ref={c => this.selectEl = c}>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button onClick={increment}>+</button>
<button onClick={decrement}>-</button>
<button onClick={incrementOdd}>和为奇数时加</button>
<button onClick={incrementWait}>等一等再加</button>
</div>
)
}
}