<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script
crossorigin
src="https://unpkg.com/react@17/umd/react.production.min.js"
></script>
<script
crossorigin
src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"
></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
const { Component } = React;
class Ipt extends Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return (
<div>
<input
type="text"
value={this.props.inputValue}
onChange={this.props.changeValue}
/>
<button onClick={this.props.add}>添加</button>
</div>
);
}
}
class List extends Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return (
<div>
<ul>
<li>
{this.props.lists.map((item, index) => {
return (
<li key={index} onClick={() => this.props.del(index)}>
{item}
</li>
);
})}
</li>
</ul>
</div>
);
}
}
class App extends Component {
constructor(props) {
super(props);
this.state = {
inputValue: "react",
list: [1, 2, 3],
};
}
// 改变value
changeValue = (e) => {
console.log(e.target.value);
this.setState({
inputValue: e.target.value,
});
};
// 添加
add = () => {
this.setState({
list: [...this.state.list, this.state.inputValue],
inputValue: "",
});
};
// 删除
del = (index) => {
console.log(index);
const newList = this.state.list;
newList.splice(index, 1);
this.setState({
list: [...newList],
});
};
render() {
return (
<div>
<Ipt
inputValue={this.state.inputValue}
changeValue={this.changeValue}
add={this.add}
/>
<List lists={this.state.list} del={this.del} />
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("app"));
</script>
</body>
</html>
react实现todolist(拆分组件)
最新推荐文章于 2022-12-07 00:29:34 发布