React | получить значение input

Question

Не могу понять как в React получить значение input и добавить в state

import React from 'react';
import state from "../state";


const Engine = () => {

    const addFood = () => {
        let newFood = {
            nameFood: state.this.input1.current.value,
            calories: state.this.input2.current.value
        };

        state.Food.push(newFood);
    }

    return (

        <div>


            <form>
                <label>
                    Продукт:
                    <input type="text" name='input1'/>
                    <input type="text" name='input2'/>
                </label>
                <input type="submit" value="Отправить" onClick={addFood}/>
            </form>
        </div>
    )

}

export default Engine;

Answer 1

Держи.

Пояснение: создаём переменную useState, где первый элемент - значение, а второй - изменение значения. Потом в каждом input событии onChange (когда изменяется значение) перехватываем событие, и задаём значение нашей переменной. Это же значение ставим как value (значение) этого же input-а. В итоге у нас есть две переменные куда записываются значения input-ов при их изменении. Потом мы можем использовать их. За работоспособность state.Food.push(newFood); не ручаюсь, т.к. нет кода state, но в переменных inputOne и inputTwo точно будут сохраняться значения инпутов.

import React, { useState } from 'react';
import state from "../state";


const Engine = () => {

  const [inputOne, setInputOne] = useState('');
  const [inputTwo, setInputTwo] = useState('');

  function addFood() {

    let newFood = {
        nameFood: inputOne,
        calories: inputTwo
    };

    state.Food.push(newFood);

  }

  return (

    <div>

        <form>

            Продукт:
            <input 
                type="text" 
                name='input1' 
                value={inputOne} 
                onChange={(event) => setInputOne(event.target.value)}
            />

            <input 
                type="text" 
                name='input2' 
                value={inputTwo} 
                onChange={(event) => setInputTwo(event.target.value)}
            />

            <input type="submit" value="Отправить" onClick={addFood}/>

        </form>

    </div>
  )

}

export default Engine;

Желаю удачи в обучении!

БЛОГ НА HUSL

React | получить значение input

Ответы (1 шт):