React. Как взять значение с инпута и закинуть его в массив?

Question

Всем привет! Вопрос: как забрать значения с инпута и переслать их в массив. Сам инпут находится в файле Modal.js, а массив в App.js

Код Modal.js

import React from 'react'
import './Modal.css'



export default class Modal extends React.Component {
  state = {
    isOpen: false
  }


  render() {
    return (
      <React.Fragment>
        <button style={{left: "40%", position: "relative"}} onClick={() => this.setState({ isOpen: true })}>
          Open modal
        </button>

        {this.state.isOpen && (
          <div className='modal'>
            <div className='modal-body'>
              <h1>Product</h1>
              <p>Name</p>
              <input /> // Забрать значение отсюда

              <p>Count</p>
              <input /> // Забрать значение отсюда
              <button   onClick={() => {this.setState({ isOpen: false })}}>
                Add
              </button>
            </div>
          </div>
        )}
      </React.Fragment>
    )
  }
}

На данный момент в коде кнопка "Add" отвечает просто за закрытие модального окна

Код App.js

import React from 'react';
import './App.css';
import Modal from './Modal/Modal';
import Tables from './Tables/Tables';

function travell(Products) {
  return Products.name;
}

const Products = 
[
  {
    name: "one",
   count: "1"
  },
  {
    name: "two",
   count: "1"
  },
  {
    name: "third",
   count: "2"
  }
]

function App() {
  return (
      <div>
          <h1 style={{textAlign: "center"}}>Product</h1>
          <Tables Products={Products}/>
          <Modal />
      </div>
  );
}

export default App;

Помощь в решении дарует вам на этой недели бонус к приросту Золотых драконов +2, удачи и кармы.

Answer 1

в App создать функцию которая меняет массив и передать ее в Modal
в Modal создать refs для каждого поля ввода, создать функцию обработки клика по кнопке add. В ней собрать значения из рефов упаковать из в объект и передать в функцию которая пришла из App.
Если вам нужно чтобы компонент реагировал на изменение массива Products его лучше поместить в state

App.js

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

function travell(Products) {
  return Products.name;
}

function App() {
  const [Products, setProducts] = useState([{
      name: "one",
      count: "1"
    },
    {
      name: "two",
      count: "1"
    },
    {
      name: "third",
      count: "2"
    }
  ]);

  const addProduct = (product) => {
    setProducts([...Products, product]);
  };
  return ( <
    div >
    <
    h1 style = {
      {
        textAlign: "center"
      }
    } > Product < /h1> <
    Tables Products = {
      Products
    }
    /> <
    Modal add = {
      addProduct
    }
    /> <
    /div>
  );
}

export default App;

Modal.js

import React from "react";
import './Modal.css'

export default class Modal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isOpen: false
    };
    this.nameInput = React.createRef();
    this.countInput = React.createRef();
    this.addHandler = this.addHandler.bind(this);
  }

  addHandler() {
    const name = this.nameInput.current.value;
    const count = this.countInput.current.value;
    this.props.add({ name, count });
    this.setState({ isOpen: false });
  }

  render() {
    return (
      <React.Fragment>
        <button
          style={{ left: "40%", position: "relative" }}
          onClick={() => this.setState({ isOpen: true })}
        >
          Open modal
        </button>

        {this.state.isOpen && (
          <div className="modal">
            <div className="modal-body">
              <h1>Product</h1>
              <p>Name</p>
              <input ref={this.nameInput} type="text" />
              <p>Count</p>
              <input ref={this.countInput} type="number" />
              <button onClick={this.addHandler}>Add</button>
            </div>
          </div>
        )}
      </React.Fragment>
    );
  }
}

БЛОГ НА HUSL

React. Как взять значение с инпута и закинуть его в массив?

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