Блог

Главная - Вопросы по программированию - Простая форма с реагирующими крючками

Простая форма с реагирующими крючками

#reactjs #react-hooks

#reactjs #реагирующие крючки

Вопрос:

Это очень просто, я пытаюсь добавить ввод формы в состояние, но это не работает. Может кто-нибудь указать, что я делаю неправильно?

Песочница: https://codesandbox.io/s/unruffled-pine-64pxe?file=/src/App.js

 import React, { useState } from 'react';
import './App.css';

function App() {
    return (
      <div>
        <Field />
      </div>
    );
  }


function Field(){
  const [toDoItem, setToDoItem] = useState("");
console.log(toDoItem)

  const addToDoItem = (event) => {
    setToDoItem(event.target.value)
  }

  return (
        <form >
            <input type="text" value={toDoItem} onChange={addToDoItem}/>
            <input type="submit" value="Add" />
        </form>
  );
}

export default App;

Комментарии:

1. Что это такое, что не работает ?

2. Все работает нормально, как и предполагалось. Итак, что у вас не работает?

3. Я хочу иметь возможность вводить «test» в форму ввода. Затем, когда я нажимаю «Добавить», я хочу, чтобы он был добавлен в состояние. У меня есть журнал консоли для отображения состояния. Как только я нажимаю «Добавить», мне нужна консоль. войдите, чтобы отобразить «тест»

Ответ №1:

   handleSubmit(event) {
    console.log('Form submitted: '   toDoItem);
  }

Шаблон:-

       <form onSubmit={this.handleSubmit}>
            <input type="text" value={toDoItem} onChange={addToDoItem}/>
            <input type="submit" value="Add" />
    </form>