React 表单随着状态的每次变化而重置？

Question

我正在使用 formik 开发一个简单的 crud 表单，用于学习目的，这

现在这个表格我面临两个问题

第一期

因为数量字段应该只输入数字所以我添加了一个 onChange 侦听器并在只输入数字时更新状态，它工作正常，但问题是重置整个表格

<Field
    className="form-control"
    type="text"
    name="quantity"
    onChange={this.onChangeCheckNumber}
>
</Field>

onChangeCheckNumber = (event) => {
    const re = /^[0-9\b]+$/;

    // if value is not blank, then test the regex

    if (event.target.value === '' || re.test(event.target.value)) {
        this.setState({ quantity: event.target.value })
    }
}

我认为这段代码是罪魁祸首

this.setState({ quantity: event.target.value })

因为我正在设置状态，所以我想我的整个表单又被重新渲染了，

如何完美实现这个功能？

第2期

仓库选择取决于城市选择，所以我在城市上添加了一个 onChange 并为选定的 cityId 调用了仓库，我正在接收数据，但是城市下拉列表被阻止了。

我的状态属性

state = {
        quantity: 0,
        price: "0",
        comments: '',
        itemType: {
            key: 0,
            value: 'Select'
        },
        cities: {
            key: 0,
            value: 'Select'
        },
        warehouses: {
            key: 0,
            value: 'Select'
        },
        sellers: {
            key: 0,
            value: 'Select'
        },
        warehouseOptions: null
    }

在 componentDidMount 中，我正在初始化下拉值

componentDidMount() {
        this.itemTypeObject();
        this.cityObject();
        this.sellerObj();
    }

正在使用 axios 从服务器获取数据并更新状态

cityObject = () => {
        axios.get('/cities')
            .then(response => {
                this.setState({
                    cities: response.data
                });
            }).catch(error => {
                console.log(error);
            });
    }

在我的 Formik 表单中 标记我的城市和仓库下拉列表

<div>
        <label>City</label>
        <div>
            <Field
                as="select"
                onChange={this.onCityDropdownSelected}
                name="city"
            >
                {this.createCity()}
            </Field>
        </div>
</div>
<div>
    <label>Warehouse</label>
    <div>
        <Field
            className="form-control"
            as="select"
            name="warehouse"
        >
            {this.state.warehouseOptions}
        </Field>
    </div>
</div>

还有我的 onCityDropdownSelected

onCityDropdownSelected = (event) => {
        if (event.target.value !== "0") {
            this.warehouseObj(event.target.value);
        } else {
            this.setState({
                warehouseOptions: null
            })
        }
    }

warehouseObj = (cityId) => {
        axios.get(`/warehouses/cityId/${cityId}`)
            .then(response => {
                this.setState({
                    warehouses: response.data
                });
                this.createWarehouse();
            }).catch(error => {
                console.log(error);
            });
    }

在此之后，我在仓库下拉列表中获得了更新的值，但城市下拉列表打开了，但在选择时没有改变。

Answer 1

在您的第 1 期中，您通过 this.setState({ quantity: event.target.value }) 更改整个状态，因为它会更改您的状态并清除所有其他状态值，最终状态将仅包含导致重置表单状态的数量。

要解决该问题，您必须解构旧状态，而不仅仅是像这样更改数量：

this.setState{...state, quantity: event.target.value}

至于 onCityDropdownSelected 发生了同样的问题。请告诉我这个答案是否有助于解决您的问题。

React 表单随着状态的每次变化而重置？

React form getting reset with every change in state?

javascript

reactjs

formik