1

Я только выучил новый для себя хук useState и у меня есть проблема...
Сейчас полетят тухлые помидоры в экран но я поставил себе задачу и не могу ёё решить.
Суть: есть обычное поле input в которое пользователь должен вводить кокой либо текст и после нажатия на кнопку текст должен отобразится на экране ( типо todo list ).
Проблема: Я посмотрел пару видео о даном хуке но научился я только самого банального ( делать счетчик и все по сути )

На даном примере кода я начал разработку задуманого но незнаю как присобачить веденное с инпута в переменную состояния хука "state, input"

Я не знаю что делать но я не понимаю логики хука, просьба не писать чтобы я внимательно читал документацию так как уже читал ее по несколько раз

import React, { useState } from 'react'

function App() {

    const [state, setState] = useState([])
    const [input, setInput] = useState('')

    function handleClick() {
        setState([...state, input])
    }

    return (
        <div>
            <input value={input} onChange={setState} />
            <button className="btn" onClick={handleClick}>Touch</button>
            <div>
                {
                    state.map()
                }
            </div>
        </div>
    )
}

export default App

2 ответа 2

1
  1. метод state.map() пустой 2)setState у вас передает событие а не значение

    import React, { useState } from 'react'; function App() { const [state, setState] = useState([]) const [input, setInput] = useState('')

         function handleClick() {
             setState([...state, input])
         }
         function handleInput(event){
             setInput(event.target.value);
         }
    
         return (
             <div>
                 <input value={input} onChange={handleInput} />
                 <button className="btn" onClick={handleClick}>Touch</button>
                 <div>
                     {state.map(function(el){return <div>{el}</div>})}
                 </div>
             </div>
         )
     }
    
     export default App
    

как то так надо

1

В инпуте в атрибуте onChange вызывается setState, но значение не передаётся. Должно быть setState(value). После вызова с передачечей value, значение будет храниться в переменной state. Соответственно при клике обработчиком должна быть callback-функция, которая возьмёт из переменной value значение (оно будет равно тому, что было введено в инпуте).

Пример:

import React, { useState } from 'react'

function App() {

    const [todos, setTodos] = useState([])
    const [input, setInput] = useState('')

    function clickHandler() {
        const value = input // input доступен отсюда
        // ... далее обращение к API или то что нужно
        // например, копируем туду, которые были и добавляем новую
        setTodos([...todos, value])
    }

    return (
        <div>
            <input onChange={setInput(this.value)} />
            <button className="btn" onClick={clickHandler}>Add todo</button>
            <div>
                {
                    todos.map(todo => (<><div>{todo}</div><br/></>))
                }
            </div>
        </div>
    )
}

export default App

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.