Use buttom submit instead of form submit

BanlyTong · BanlyTong · commit f310013ece0d · 2019-06-04T17:10:13.000+07:00
diff --git a/src/containers/TodoForm.jsx b/src/containers/TodoForm.jsx
@@ -1,25 +1,52 @@
-import React from 'react';
+import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { addTodo } from '../actions';
 
-const AddTodo = ({ dispatch }) => {
-	let input;
+class TodoForm extends Component {
+	constructor() {
+		super();
+		this.state = {
+			todo: ""
+		}
+		this.handleSubmit = this.handleSubmit.bind(this);
+		this.handleChange = this.handleChange.bind(this);
+	}
 
-	const handleSubmit = e => {
+	handleChange(e) {
 		e.preventDefault();
-	    if(!input.value.trim()) return;
-	    dispatch(addTodo(input.value));
-	    input.value = ""
+		this.setState({ [e.target.id]: e.target.value })
+	}
+
+	handleSubmit(e) {
+		e.preventDefault();
+		if(this.state.todo === "") return;
+		this.props.addTodo(this.state.todo);
+		this.setState({todo: ""});
+	}
+
+	render() {
+		return (
+			<div>
+				<form>
+		          <input 
+		          	type="text" 
+		          	className="form-control col-6 d-inline"
+		          	id="todo" 
+		          	value={this.state.todo}
+		          	onChange={this.handleChange}
+		          	placeholder="Todo What?" 
+		          />
+		          <button type="submit" className="btn btn-primary ml-2" onClick={this.handleSubmit}>Add</button>
+		        </form>
+			</div>
+		);
+	}
+}
+
+function mapDispatchToProps(dispatch) {
+	return {
+		addTodo : todo => dispatch(addTodo(todo))
 	}
-	
-	return (
-		<div>
-			<form onSubmit={handleSubmit}>
-	          <input type="text" className="form-control col-6 d-inline" ref={node => (input = node)} placeholder="Todo What?" />
-	          <button type="submit" className="btn btn-primary ml-2">Add</button>
-	        </form>
-		</div>		
-	)
 }
 
-export default connect()(AddTodo);
+export default connect(null, mapDispatchToProps)(TodoForm);
diff --git a/src/pages/Todo.jsx b/src/pages/Todo.jsx
@@ -17,7 +17,7 @@ export default class Todo extends Component {
 
   handleChange = (e) => {
     e.preventDefault();
-    this.setState({todo: e.target.value })
+    this.setState({[e.target.id]: e.target.value })
   }
 
   render() {
@@ -29,7 +29,7 @@ export default class Todo extends Component {
       <div>
         <h1>No Redux</h1>
         <form>
-          <input type="text" className="form-control col-6 d-inline" value={this.state.todo} onChange={ this.handleChange } placeholder="Todo What?" />
+          <input type="text" className="form-control col-6 d-inline" id="todo" value={this.state.todo} onChange={ this.handleChange } placeholder="Todo What?" />
           <input type="submit" className="btn btn-primary ml-2" value="Add" onClick={this.handleSubmit}/>
         </form>
         <h3 className="text-left ml-2 mt-2">Todo List: </h3>
diff --git a/src/reducers/todos.js b/src/reducers/todos.js
@@ -1,10 +1,8 @@
 const todos = (state = ["Create Todo app", "Use Redux"], action ) => {
 	switch (action.type) {
 		case 'ADD_TODO':
-			console.log(action);
 			return [...state, action.text];
 		default: 
-			console.log(action.type)
 			return state
 	}
 }

Original file line number	Diff line number	Diff line change
`@@ -1,10 +1,8 @@`
`1`	`1`	`const todos = (state = ["Create Todo app", "Use Redux"], action ) => {`
`2 57A7`	`2`	`switch (action.type) {`
`3`	`3`	`case 'ADD_TODO':`
`4`		`- console.log(action);`
`5`	`4`	`return [...state, action.text];`
`6`	`5`	`default:`
`7`		`- console.log(action.type)`
`8`	`6`	`return state`
`9`	`7`	`}`
`10`	`8`	`}`