обновить значение элемента объекта в локальном состоянии с помощью входного значения, используя setState

Question

Как правильно обновить (объединить) входное значение с предыдущим значением элемента объекта?

Рассмотрим приведенный ниже пример:

местные штаты

this.state = { model: 'ggg'}

В обработчике

handleChange = (event) => {
            this.setState({...this.state,
                [event.target.name]: event.target.value});
        };
render() {

        const {values} = this.state;
        return (
<TextField
        id="model"
        label="Model"
        name="model"
        value={this.state.model}
        onChange={evt => this.handleChange(evt)}/>
)
    };

это обновление модели, пока я вводю символы и обновляю модель как "ggga", "gggaaa".

Но я хочу обновить свой объект сейчас.

местные штаты

this.state = {values: { model: 'ggg'}}

и я попробовал,

handleChange = (event) => {
this.setState(prevState => ({
  values: {
    ...prevState.values,
    [event.target.name]: event.target.value
  },
}))}

<TextField
    id="model"
    label="Model"
    name="model"
    value={this.state.values.model}
    onChange={evt => this.handleChange(evt)}/>

Вывод: "ggga", "gggq"

это не дает мне ожидаемый результат. Может кто-нибудь, пожалуйста, предложите решение.

Спасибо

Answer 1

Если ваше состояние

{
    values: { 
        model: 'ggg'
    }
}

, и у вас есть несколько атрибутов в значениях (больше всего model), и вы хотите обновить только model, я бы посоветовал вам сделать это:

this.setState({
    values: {
        ...this.state.values,
        model: event.target.value,
    } 
});

Это также работает, если у вас есть другие атрибуты в вашем состоянии.Как @ corrado4eyes, вам не нужно проходить предыдущее состояние.

Answer 2

Вам не нужно передавать ...prevState или ...this.state, вы можете просто использовать

this.setState({
    myProp: newValue
})

. Что касается того, что вы спрашиваете (как объединить символы), используйте onKeyDown /Событие onKeyUp, чтобы получить только тот символ, который вы нажали, и объединить его в такое состояние:

<TextField
    id="model"
    label="Model"
    name="model"
    value={this.state.values.model}
    onChange={evt => this.handleChange(evt)}
    onKeyDown={evt => this.handleKeyDown(evt)}
/>

.
.
.
.

function handleKeyDown(evt){
    evt.preventDefault();
    this.setState({
        myProp: this.state.myProp + evt.target.value
    })
}