◾️ Reactでの使用例
<input value={todo.value} onChange={todo.onChange} />
<input {...todo} />
import React, {useState} from 'react';
import ReactDOM from 'react-dom';
function useInput(todo) {
const [value, setValue] = useState(todo);
const onChange = e => {
const {target:{value}} = e;
setValue(value);
}
return {value, onChange};
}
function App() {
const todo = useInput("");
console.log(todo);
return (
<div className="App">
<h1>React Hooks</h1>
<input value={todo.value} onChange={todo.onChange} placeholder="input todo..." />
</div>
);
}
ReactDOM.render(<App />, document.getElementById("root"));
import React, {useState} from 'react';
import ReactDOM from 'react-dom';
function useInput(todo) {
const [value, setValue] = useState(todo);
const onChange = e => {
const {target:{value}} = e;
setValue(value);
}
return {value, onChange};
}
function App() {
const todo = useInput("");
console.log(todo);
return (
<div className="App">
<h1>React Hooks</h1>
<input {...todo} placeholder="input todo..." />
</div>
);
}
ReactDOM.render(<App />, document.getElementById("root"));