import React from 'react';
import ReactDOM from 'react-dom';
import 'font-awesome/css/font-awesome.min.css';
import './index.css';
import './index.scss';
class Component extends React.Component {
constructor(props) {
super(props);
this.state = {
name: 'Yuusuke',
age: 18
};
}
handleClick() {
this.setState({
age: this.state.age + 1
})
}
onValueChange(e) {
this.setState({
age: e.target.value
})
}
render() {
return (
<div>
<h1>I am {this.state.name}</h1>
<p>I am {this.state.age} years old!</p>
<p>
<button onClick={() => {
this.handleClick
}}>年龄加一
</button>
</p>
<p>
<button onClick={() => {
this.handleClick()
}}>年龄加一
</button>
</p>
<p>
<button onClick={(e) => {
this.handleClick(e)
}}>年龄加一
</button>
</p>
<p><input type="text" onChange={(e) => {
this.onValueChange(e)
}}/></p>
</div>
);
}
}
class App extends React.Component {
render() {
return (
<div className="">
<h1>APP</h1>
<hr/>
<Component/>
</div>
);
}
}
ReactDOM.render(
<div>
{/*<Component></Component>*/}
<App></App>
</div>,
document.getElementById('app')
);
深入了解React(六、纯组件方式组合)
最新推荐文章于 2024-09-15 22:12:24 发布