Javascript Spread Operator (…)

◾️ 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"));

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です