0
点赞
收藏
分享

微信扫一扫

对react的研究0

点亮自己的那盏灯 2022-07-14 阅读 24

对react的研究
1.class HelloMessage extends React.Component {
render() {
return (
<div>
Hello {this.props.name}
</div>
);
}
}

ReactDOM.render(
<HelloMessage name="Taylor" />,
mountNode
);

2.class Timer extends React.Component {
constructor(props) {
super(props);
this.state = { seconds: 0 };
}

tick() {
this.setState(state => ({
seconds: state.seconds + 1
}));
}

componentDidMount() {
this.interval = setInterval(() => this.tick(), 1000);
}

componentWillUnmount() {
clearInterval(this.interval);
}

render() {
return (
<div>
Seconds: {this.state.seconds}
</div>
);
}
}

ReactDOM.render(<Timer />, mountNode);

3.

class TodoApp extends React.Component {
constructor(props) {
super(props);
this.state = { items: [], text: '' };
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
render() {
return (
<div>
<h3>TODO</h3>
<TodoList items={this.state.items} />
<form onSubmit={this.handleSubmit}>
<label htmlFor="new-todo">
What needs to be done?
</label>
<input
id="new-todo"
onChange={this.handleChange}
value={this.state.text}
/>
<button>
Add #{this.state.items.length + 1}
</button>
</form>
</div>
);
}

handleChange(e) {
this.setState({ text: e.target.value });
}

handleSubmit(e) {
e.preventDefault();
if (!this.state.text.length) {
return;
}
const newItem = {
text: this.state.text,
id: Date.now()
};
this.setState(state => ({
items: state.items.concat(newItem),
text: ''
}));
}
}

class TodoList extends React.Component {
render() {
return (
<ul

举报

相关推荐

0 条评论