Установите состояние модели с помощью React Hooks в форме ввода

Question

Как изменить состояние модели, используя встроенную функцию setState() в React Hooks для ввода формы?

Например, как связать setFirstName() с onChange в поле ввода?

import React, { useState } from 'react';

const Demo = () => {
   const [ firstName, setFirstName ] = useState('');

   return (
     <div>
       <form>
        <input className="input" name="firstname" value={firstName} 
         //what do i put in onChange here?
          onChange=? />
        </form>
     </div>
   );
}

Answer 1

import React, { useState } from 'react';
const App = () => {

   //Initialize to empty string
   const [ firstName, setFirstName ] = useState("");

   const handleSubmit = () => {
      //You should be able console log firstName here
      console.log(firstName)
   }

   return (
     <div>
       <form>
        <input className="input" name="firstname" value={firstName} 
          onChange={e => setFirstName(e.target.value)} />
        <button type="submit" onClick={handleSubmit}>Submit</button>
       </form>
     </div>

    );
}

Перед этим убедитесь, что вы сделали npm install react@next react-dom@next, чтобы получить библиотеку React Hooks.

Редактировать (3 марта 2019 г.): React Hooks - новое дополнение в React 16.8