class AddTodoForm extends React.Component {
state = {
message: ''
};
onFormSubmit(e) {
e.preventDefault();
store.dispatch(addTodo(this.state.message));
this.setState({ message: '' });
}
onMessageChanged(e) {
var message = e.value.trim();
this.setState({ message: message });
}
render() {
return (
<form onSubmit={this.onFormSubmit.bind(this)}>
<input type="text" placeholder="Todo..." onChange={this.onMessageChanged.bind(this)} value={this.state.message} />
<button type="submit" value="Add" />
</form>
);
}
}
class TodoItem extends React.Component {
onDeleteClick() {
store.dispatch(deleteTodo(this.props.index));
}
onCompletedClick() {
store.dispatch(completeTodo(this.props.index));
}
render() {
return (
<li>
<a href="#" onClick={this.onDeleteClick.bind(this)}>[x]</a>
<a href="#" onClick={this.onCompletedClick.bind(this)}>{this.props.message}</a>
</li>
);
}
}
class TodoList extends React.Component {
state = {
items: []
};
componentWillMount() {
store.subscribe(() => {
var state = store.state();
this.setState({
items: state.todo.items
});
});
}
render() {
var items = [];
this.state.items.forEach((item, index) => {
items.push(<TodoItem
index={index}
message={item.message}
completed={item.completed}
/>);
});
return (
<ol>{ items }</ol>
);
}
}
这是用redux结合react的几个view组件,为什么组建内部声明state的时候是直接定义的变量,而不是采用getInitialState
方法呢? 如果效果相同的话,二者有什么区别呢?
一个是es5写法 getInitialState
一个是es6写法 state
他们都是将state挂载在this上的,不管是es5还是es6写法,你获取和设置state的方法都是