1

Как добавить объект в массив объектов в react?

import React, {Component} from 'react';
import './App.css';
import Car from './Car/Car'

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            cars: [
                {name: 'Ford', year: 2018},
                {name: 'Audi', year: 2016},
                {name: 'Mazda', year: 2010}
            ],
            pageTitle: 'React components',
            showCars: false,
            newCar: {}
        }
    }


    toggleCarsHandler = () => {
        this.setState({
            showCars: !this.state.showCars
        })
    }

    onChangeName(name, index) {
        const car = this.state.cars[index]
        car.name = name
        const cars = [...this.state.cars]
        cars[index] = car
        this.setState({cars})
    }

    deleteHandler(index) {
        const cars = this.state.cars.concat()
        cars.splice(index, 1)
        this.setState({cars})
    }

    render() {
        const divStyle = {
            textAlign: 'center'
        }

        let cars = null

        if (this.state.showCars) {
            cars = this.state.cars.map((car, index) => {
                return (
                    <Car
                        key={index}
                        name={car.name}
                        year={car.year}
                        onDelete={this.deleteHandler.bind(this, index)}
                        onChangeName={event => this.onChangeName(event.target.value, index)}
                    />
                )
            })
        }

        return (
        <div style={divStyle}>
            <h1>{this.props.title}</h1>

            <button
                onClick={this.toggleCarsHandler}
            >Toggle cars
            </button>
            <input type="text" placeholder={"name"}/>
            <input type="text" placeholder={"year"}/>
            <div style={{
                width: 400,
                margin: 'auto',
                paddingTop: '20px'
            }}>
                {cars}
            </div>
        </div>
       );
    }
}

export default App;

Поля этого объекта вводит пользователь через input. Есть пример с удалением и апдейтом объектов из state. Помогите с добавлением.

import React from 'react'
import Radium from "radium";
import './Car.css'

const Car =  props => {
    const inputClasses = ['input']
    if (props.name !== '') {
        inputClasses.push('green')
    }
    else {
        inputClasses.push('red')
    }
    if(props.name.length > 4){
        inputClasses.push('bold')
    }
    const style = {
        border: "1px solid #ccc",
        ':hover': {
            border: "1px solid #aaa"
        },
        ':first-child': {
            background: 'red'
        }
    }
    return (
        <div className="Car" style={style}>
            <h3>Сar name: {props.name}</h3>
            <p>Year: <strong>{props.year}</strong></p>
            <input type="text" onChange={props.onChangeName} value={props.name} className={inputClasses.join(' ')}/>
            <button onClick={props.onDelete}>Delete</button>
        </div>
    )
}
 export default Radium(Car)
6
  • Вы про какой инпут? Который почему-то лежит внутри кнопки?
    – user355286
    6 янв 2020 в 12:33
  • Вообще, у вас должно быть тогда два инпута: для name и year. Если только вы не собираетесь парсить строку
    – user355286
    6 янв 2020 в 12:38
  • @hu-fo-of-ex Конечно, он не должен лежать внутри кнопки. Исправила код. 6 янв 2020 в 12:54
  • А в какой момент данные должны заноситься в массив? Вы отправляете форму или что?
    – user355286
    6 янв 2020 в 13:06
  • 1
    key={index} - плохая затея
    – qwabra
    6 янв 2020 в 13:11

1 ответ 1

0

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      cars: [
        { name: "Ford", year: 2018 },
        { name: "Audi", year: 2016 },
        { name: "Mazda", year: 2010 }
      ],
      inputValues: { name: "", year: "" },
      pageTitle: "React components",
      showCars: false,
      newCar: {}
    };
  }

  onChangeHandler = e => {
    this.setState({
      inputValues: {...this.state.inputValues, [e.target.name]: e.target.value}
    })
  };

  onSubmitHandler = e => {
    e.preventDefault();
    this.setState({
      cars: [...this.state.cars, {name: this.state.inputValues.name, year: this.state.inputValues.year}]
    })
    
  };

  render() {
    console.log(this.state);
    return (
      <>
        <form onSubmit={this.onSubmitHandler}>
          <input
            onChange={this.onChangeHandler}
            name="name"
            type="text"
            placeholder={"name"}
          />
          <input
            onChange={this.onChangeHandler}
            name="year"
            type="text"
            placeholder={"year"}
          />
          <button type="submit">xxxx</button>
        </form>
      </>
    );
  }
}

4
  • После хуков супер непривычно, пришлось даже вспоминать как setState пишется =D
    – user355286
    6 янв 2020 в 13:56
  • ещё есть this.forceUpdate() вместо состояний. по мне тут должен быть отдельный компонент, принимающий на входе CarList
    – qwabra
    6 янв 2020 в 14:04
  • @qwabra что значит вместо состояний?
    – user355286
    6 янв 2020 в 14:07
  • вместо this.props.carList и this.state.carList используешь this.carList который не отслеживается, делашь нужные манипуляции, потом вызываешь рендер. ru.reactjs.org/docs/react-component.html#forceupdate
    – qwabra
    6 янв 2020 в 14:14

Ваш ответ

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

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