时间戳

首页 > 解决方案 > Reactjs handleChange 与更改数组中的子数据

javascript - Reactjs handleChange 与更改数组中的子数据

问题描述

有一个经典的手柄更改功能。我可以更改同一目录中的数据。没有问题。但我有子数据。我无法改变它们。我想把它当作干净的东西来处理，而不需要在 handlechange 中输入额外的函数。我该怎么做？

我的状态：

 this.state = {
            formData: {
                appointedBroker: '',
                propertyInformations: {
                    rent: false,
                    property: {
                        housing: false,
                    },
                    features: {
                        rooms: ""
                    },
                    location: ""
                },
            }
        }

我的handleChange函数：

 handleChange(event) {
        const { formData } = this.state;
        formData[event.target.name] = event.target.value;
        this.setState({ formData });
    }

和我的投入

        <TextField
            value={propertyInformations.features.rooms}
            onChange={(e) => this.handleChange(e)}
            id="rooms"
            name={'rooms'}
            type={'text'}
            label={t('Rooms')} />

在这种情况下，我只是更改了“指定经纪人”数据，例如；我想换“房间”

标签： javascriptarraysjsonreactjsreact-native

解决方案

在你的handleChange职能中，你是directly mutating the state违背React模式的。这样做会使更新未被检测到，例如componentDidUpdate.

推荐的方法是这样的：

handleChange(event) {
       this.setState(prevState => ({
          formData: {
            ...prevState.formData ,
            [prevState.formData.propertyInformations.features.rooms]: e.target.value,
          },
         }));
    }

推荐阅读