list.jsx部分
import React, { Component } from "react";
import { connect } from "react-redux";
const mapStateToProps = (state) => {
return {
list: state.list,
};
};
class List extends Component {
handleDelete = (index) => {
this.props.list.splice(index, 1);
this.setState({
// 这一步还是蛮重要的,不然数据点击之后,不会改变,当再次输入数据添加之后,
// 上一次删除数据才会消失
list: [...this.props.list],
});
};
render() {
// console.log(this);
return (
<>
<ul>
{this.props.list.map((item, index) => (
<li key={index} onClick={this.handleDelete.bind(this, index)}>
{item}
</li>
))}
</ul>
</>
);
}
}
export default connect(mapStateToProps)(List);
input.jsx部分
import React, { Component } from "react";
import { connect } from "react-redux";
const mapDispatchToProps = (dispatch) => {
return {
add(value) {
dispatch({
type: "add",
task: value,
});
},
};
};
class Input extends Component {
state = {
textValue: "",
};
handleChange = (e) => {
this.setState({
textValue: e.target.value,
});
};
handleKey = (e) => {
if (e.keyCode === 13 && this.state.textValue) {
this.props.add(this.state.textValue);
this.setState({
textValue: "",
});
}
};
render() {
// console.log(this);
return (
<>
<input
type="text"
value={this.state.textValue}
onChange={this.handleChange}
onKeyUp={this.handleKey}
/>
</>
);
}
}
export default connect(null, mapDispatchToProps)(Input);
没有什么注释,里面的写法在前几篇里都出现过