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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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