Skip to content

Instantly share code, notes, and snippets.

@furkancelik
Created Jan 29, 2019
Embed
What would you like to do?
React Hooks Form Example
import React, { useState } from "react";
function useInput(initialValue) {
const [value, setValue] = useState(initialValue);
function handleChange(e) {
setValue(e.target.value);
}
return {
value,
onChange: handleChange
};
}
function formExample() {
const input1 = useInput("");
const input2 = useInput("");
return (
<form
onSubmit={e => {
e.preventDefault();
console.log(input1.value, input2.value);
}}
>
<input {...input1} />
<br />
<input {...input2} />
<br />
<button type={"submit"}>Gönder</button>
</form>
);
}
export default formExample;
import React, { useState } from "react";
function formExample() {
const [form, setInput] = useState({
input1: "",
input2: ""
});
const handleChange = name => e => {
const newForm = {
...form,
[name]: e.target.value
};
setInput(newForm);
};
return (
<form
onSubmit={e => {
e.preventDefault();
console.log(form);
}}
>
<input
type={"text"}
name={"input1"}
value={form.input1}
onChange={handleChange("input1")}
/>
<br />
<input
type={"text"}
name={"input2"}
value={form.input2}
onChange={handleChange("input2")}
/>
<br />
<button type={"submit"}>Gönder</button>
</form>
);
}
export default formExample;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment