React - 改变未受控制的输入

25 浏览
0 Comments

React - 改变未受控制的输入

我有一个简单的React组件，其中包含一个表单，我认为其中有一个受控输入:

import React from 'react';
export default class MyForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {}
    }
    render() {
        return (

) } onFieldChange(fieldName) { return function (event) { this.setState({[fieldName]: event.target.value}); } } } export default MyForm;

当我运行应用程序时，我会收到以下警告:

警告：MyForm正在将一个未受控制的文本输入类型更改为受控制的。输入元素不应从未受控制的状态切换到受控制的状态（反之亦然）。在组件的整个生命周期内，应该决定使用受控制的还是未受控制的输入元素

我认为我的输入是受控制的，因为它有一个值。我想知道我做错了什么？

我正在使用React15.1.0

admin 更改状态以发布 2023年5月23日
0

2 答案

0 Comments

当您首次渲染组件时，this.state.name未设置，所以它会评估为undefined或null，然后您最终会将value={undefined}或value={null}传递给您的input。

当ReactDOM检查字段是否受控时，它检查是否value != null（请注意，它是!=，而不是!==), 由于在JavaScript中undefined == null，所以它认为它是不受控制的。

因此，当调用onFieldChange()时，this.state.name被设置为字符串值，您的输入从不受控制变为受控制。

如果您在构造函数中执行this.state = {name: ''}，因为'' != null，您的输入将始终具有值，该消息将消失。

0
0 Comments

我认为我的输入被控制了，因为它有一个值。

要使输入受控，其值必须对应于状态变量的值。

在你的示例中，最初无法满足这个条件，因为this.state.name 最初没有设置。因此，输入最初是不受控制的。一旦第一次触发onChange处理程序，this.state.name被设置。此时，上述条件得到满足，输入被认为是受控的。从不受控制到受控制的这种转换会导致上面看到的错误。

通过在构造函数中初始化this.state.name：

e.g.

this.state = { name: '' };

这样，输入将从一开始就受到控制，从而解决了这个问题。有关更多示例，请参见React 受控组件。

与此错误无关，在你的代码中，应该只有一个默认导出。你上面的代码有两个。

0