Как вставить значения в поле объекта, через SetState?

Question

[Shato Daltsaev]

Пишу приложение в React, делаю форму и столкнулся с проблемой.

Есть модель
PrePaymentParameters.ts

export interface PrePaymentParameters {
    PartnerId: number;
    OrderNumber: string;
    WebSite: string;
    AccountNumber: string;
    Sign: string;
    SumValue: number;
    EmailClient: string;
    EmailOperator: string;
    NumberTransactions: number;
    SumTransaction: number;
}

Импортирую ее в форму и кидаю ее в state

import * as React from "react";
import 'bootstrap/dist/css/bootstrap.min.css';
import Field from '../../components/Field/Field';
import Form from '../../components/Form/Form';
import ContentHeader from '../../components/ContentHeader/ContentHeader';
import { PrePaymentParameters } from '../../models/Orders/Operations/PrePaymentParameters'
import {
    Card,
    CardBody,
    Col,
    Row,
} from 'reactstrap';
import Axios from "axios";

export interface IFormState {
    submitSuccess?: boolean;
    prePayment: PrePaymentParameters;
}


export default class PaymentByCardPage extends React.Component<{}, IFormState> {

    constructor(props: {}) {
        super(props);

        this.state = {
            prePayment: {
                PartnerId: 766,
                OrderNumber: "",
                WebSite: "sa",
                AccountNumber: "",
                Sign: "gdfgmsdlkfdfngjm",
                SumValue: 0,
                EmailClient: "[e-mail]",
                EmailOperator: "[e-mail]",
                NumberTransactions: 5,
                SumTransaction: 500
            }

        };
    }

Теперь пытаюсь установить значения, когда происходит событие OnChange на Input, но у меня не получается обратиться непосредственно к полю внутри объекта.

<Field id="SumValue" label="Сумма предоплаты" onChange={e => this.setState({ prePayment: {SumValue : 1000 } })}

Есть два вопроса
1. Как мне вставить значение в поле объекта?
2. Как в конструкторе инициализировать поля с типом number? Со строками все понятно можно сделать так
AccountNumber: "", а вот с числами не могу понять как.

Comments

[uRoot]

Что означает эта строчка?

submitSuccess?: boolean;

Конкретно вот это:

?:

Answer 1

[igorkorneichuk]

Я бы первый вопрос через https://github.com/kolodny/immutability-helper/ сделал (метод update()).

Второй вопрос, ваш SumValue: 0 не подходит?

Comments

[Shato Daltsaev]

Может архитектура приложения не правильная и мне стоит его упростить?

[igorkorneichuk]

Shatoidil, по-моему вложенность в prePayment в рамках этого компонента лишняя.
Без нее не возник бы первый вопрос.

Но возможно, у вас дальнейшая логика этого требует.

immutability-helper проблему решит.
В документации ссылаются на нее https://ru.reactjs.org/docs/update.html

[igorkorneichuk]

import update from 'immutability-helper';

setAmount(e) {
    var amount = parseFloat(e.target.value);
    
    this.setState({
        prePayment: update(this.state.prePayment, {
            SumValue: {$set: amount},
        })
    });
}

Для input

onChange={(e) => this.setAmount(e)}

[Shato Daltsaev]

igorkorneichuk, Спасибо огромное! Все получилось и заработало. Можете подсказать изящное решение.

onChange(e: any) {
        if (e.target.id == "SumValue") {
            let amount = parseFloat(e.target.value);
            this.setState({
                prePayment: update(this.state.prePayment, {
                    SumValue: { $set: amount },
                })
            });
        }
        else if (e.target.id == "OrderNumber") {
            this.setState({
                prePayment: update(this.state.prePayment, {
                    OrderNumber: { $set: e.target.value },
                })
            });
        }
        else if (e.target.id == "AccountNumber") {
            this.setState({
                prePayment: update(this.state.prePayment, {
                    AccountNumber: { $set: e.target.value },
                })
            });
        }

    }

Сделал вот так, но это очень не красиво. Есть ли более простой способ для записи данных с импутов?
Спасибо!

[igorkorneichuk]

Shatoidil, да, вместо SumValue, OrderNumber, AccountNumber внутри update использовать e.target.id в квадратных скобках.
[e.target.id]: { $set: e.target.value }

Answer 2

[real2210]

this.setState( (state)=>{...state, prePayment: {...state.prePayment, SumValue: 1000 }})

По второму вопросу я обычно делаю null либо undefined

Comments

[Shato Daltsaev]

<Field id="SumValue" label="Сумма предоплаты" onChange={ (e:any) =>  this.setState((state) => {...state, prePayment: {...state.prePayment, SumValue: 1000 }})

Сделал так. Но все равно ошибки

[real2210]

Shatoidil,

this.setState( (state)=>{ return {...state, prePayment: {...state.prePayment, SumValue: 1000 }}})

[OlegCinema]

real2210, а зачем передавать колбэк, если можно передать просто словарь? Новый словарь соединится со старым, старые значения не потеряются. Рест оператор там не нужен

[real2210]

OlegCinema, ?

[Shato Daltsaev]

real2210, Не совсем понимаю о чем Вы. Только недавно начал учить Реакт и вполне могу ошибаться с архитектурными решениями. Буду рад, если вы подробнее раскроете.