Pada react kita dapat mengambil nilai input menggunakan e.target.value, brikut contoh penulisan input pada react.
const [nama, updateNama] = setState('')
<input type="text" placeholder="name" onChange={(e) => updateNama(e.target.value)} />
Pada kasus ini kita akan menggunakan contoh pada halaman register. Buat file page/Register.js, yang isinya seperti berikut.
File page/Register.js
import React, { useState } from "react";
import { useDispatch } from "react-redux";
import { createUser } from "../actions/user.action";
const Register = (props) => {
const dispatch = useDispatch();
const [user, updateUser] = useState({});
const submitForm = (e) => {
e.preventDefault();
dispatch(createUser(user)).then((res) => {
if (res.data.status === 200) {
window.location.href = "/";
}
});
};
return (
<div className="page">
<h1 className="page-title">Register 30 Hari Js</h1>
<form className="register" onSubmit={(e) => submitForm(e)}>
<label>Nama</label>
<input
type="text"
autoComplete={"false"}
placeholder="Nama elu"
onChange={(e) => {
updateUser({ ...user, name: e.target.value });
}}
/>
<label>Label</label>
<input
type="text"
autoComplete={"false"}
placeholder="Label"
onChange={(e) => {
updateUser({ ...user, label: e.target.value });
}}
/>
<label>Link Profile</label>
<input
type="text"
autoComplete={"false"}
placeholder="ex. <http://fb.com/image.png>"
onChange={(e) => {
updateUser({ ...user, picture: e.target.value });
}}
/>
<label>Email</label>
<input
type="email"
autoComplete={"false"}
placeholder="email"
onChange={(e) => {
updateUser({ ...user, email: e.target.value });
}}
/>
<label>No Hp</label>
<input
type="text"
autoComplete={"false"}
placeholder="Phone"
onChange={(e) => {
updateUser({ ...user, phone: e.target.value });
}}
/>
<label>Website</label>
<input
type="text"
autoComplete={"false"}
placeholder="Link web"
onChange={(e) => {
updateUser({ ...user, website: e.target.value });
}}
/>
<label>Summary</label>
<textarea
rows="5"
autoComplete={"false"}
placeholder="summary..."
onChange={(e) => {
updateUser({ ...user, summary: e.target.value });
}}
></textarea>
<label>Password</label>
<input
type="password"
autoComplete={"false"}
placeholder="rahasia"
onChange={(e) => {
updateUser({ ...user, password: e.target.value });
}}
/>
<button type="submit" onClick={(e) => submitForm(e)}>
Register
</button>
</form>
</div>
);
};
export default Register;
Kemudian ubah file RouterApp.js sehingga seperti berikut.
import React, { Component, Fragment } from "react";
import { BrowserRouter, Switch, Route, Link } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";
import Register from "./pages/Register";
class RouterApp extends Component {
render() {
return (
<BrowserRouter>
<Fragment>
<nav>
<li>
{" "}
<Link to="/"> Home </Link>{" "}
</li>
<li>
{" "}
<Link to="/about"> About </Link>{" "}
</li>
<li>
{" "}
<Link to="/register"> Register </Link>{" "}
</li>
</nav>
<main>
<Switch>
<Route path="/" exact component={Home} />
<Route path="/about" exact component={About} />
<Route path="/register" exact component={Register} />
</Switch>
</main>
</Fragment>
</BrowserRouter>
);
}
}
export default RouterApp;
Action simpan ke database
Ubah pada file user.action.js untuk menambah kode sebagai proses untuk entry data ke dalam server penyedia API, sehingga kode menjadi seperti berikut.
import axios from "axios";
const baseUrl = `https://warm-refuge-26108.herokuapp.com`;
export const getUsers = () => {
return async (dispatch) => {
dispatch({
type: "GET_USER_REQUEST",
});
try {
const result = await axios.get(baseUrl + `/users`);
dispatch({
type: "GET_USER_DONE",
payload: result.data,
});
} catch (error) {
dispatch({
type: "GET_USER_ERROR",
});
}
};
};
export const createUser = (data) => {
return async (dispatch) => {
try {
const result = await axios.post(baseUrl + `/users`, data);
return result;
} catch (error) {
dispatch({
type: "GET_USER_ERROR",
});
}
};
};
Hasil Kode, akan seperti berikut:
Hasil, data setelah kembali ke halaman home.
