Как написать функцию для кнопки в React Js

186

23 января 2020, 01:20

Для кнопки с HTML документа надо написать функцию для JS React которая считывает информацию с input type="text" и записывает в такую переменную.

var PLACES = [
{ name: "New York", zip: "10157" },
{ name: "Rome", zip: "00123" }
];

Answer 1

Попробуйте следующий вариант:

import React, { useState } from 'react';
const App = () => {
  const [places, setPlaces] = useState([]);
  const [newPlace, setNewPlace] = useState({});
  const handleCLick = () => {
    setPlaces([ ...places, newPlace]);
    setNewPlace({ name: '', zip: '' });
  }
  return (
    <>
      <div>
        <input
          placeholder="Enter place name"
          value={newPlace.name}
          onChange={e => setNewPlace({ ...newPlace, name: e.target.value })}
        />
      </div>
      <div>
        <input 
          placeholder="Enter place zip"
          value={newPlace.zip}
          onChange={e => setNewPlace({ ...newPlace, zip: e.target.value })}
        />
      </div>
      <button onClick={handleCLick}>Create Place</button>
      <h2>Places:</h2>
      {
        places.map(
          ({ name, zip }) => (
            <div key={name}>
              name: <b>{name}</b>, zip: <b>{zip}</b>
            </div>
          )
        )
      }
    </>
  )  
};
export default App;

Версия реакта должна быть не ниже 16.8.0

https://codepen.io/smolinpavel/full/KYvqqZ