我目前正在自学 Redux。为此,我创建了一个简单的 Todo 应用程序。现在在这个应用程序上,我目前正在使用dispatch()
将待办事项放入我的商店。这是关于你的意见的问题。我想避免代码异味。
我找到了两种方法来实现这一点。一用state
一用ref
。我想知道哪种方式更好?谢谢你的任何建议。两个版本如下。
版本一使用ref
:
import React, { Component } from "react";
import Todo from "./Todo";
import { connect } from "react-redux";
import { ADD_TODO } from "./actionCreators";
class TodoList extends Component {
taskRef = React.createRef();
handleSubmit = event => {
event.preventDefault();
this.props.dispatch({
type: ADD_TODO,
task: this.taskRef.current.value
});
event.currentTarget.reset();
};
render() {
let todos = this.props.todos.map((val, index) => (
<Todo task={val.task} key={index} />
));
return (
<div>
<form onSubmit={this.handleSubmit}>
<label htmlFor="task">Task </label>
<input type="text" name="task" id="task" ref={this.taskRef} />
<button type="submit">Add a Todo!</button>
</form>
<ul>{todos}</ul>
</div>
);
}
}
const mapDispatchToProps = state => ({
todos: state.todos
});
export default connect(mapDispatchToProps)(TodoList);
这是使用的第二个版本state
:
import React, { Component } from "react";
import Todo from "./Todo";
import { connect } from "react-redux";
import { ADD_TODO } from "./actionCreators";
class TodoList extends Component {
state = {
task: ""
};
handleSubmit = event => {
event.preventDefault();
this.props.dispatch({
type: ADD_TODO,
task: this.state.task
});
event.target.reset();
};
handleChange = event => {
event.persist();
this.setState((state, props) => ({
[event.target.name]: event.target.value
}));
};
render() {
let todos = this.props.todos.map((val, index) => (
<Todo task={val.task} key={index} />
));
return (
<div>
<form onSubmit={this.handleSubmit}>
<label htmlFor="task">Task </label>
<input
type="text"
name="task"
id="task"
onChange={this.handleChange}
/>
<button type="submit">Add a Todo!</button>
</form>
<ul>{todos}</ul>
</div>
);
}
}
const mapDispatchToProps = state => ({
todos: state.todos
});
export default connect(mapDispatchToProps)(TodoList);
编辑:正如qasimalbaqali在评论中指出的那样,这是关于 stackoverflow 的类似帖子。我仍然不确定,因为第一个答案说 refs 不好是有原因的,第二个答案说 React Devs 说 refs 非常适合从 dom 中获取值(这就是我正在做的事情!)。