我有一个简单的react组件的形式,我相信有一个受控的输入:

import React from 'react';

export default class MyForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {}
    }

    render() {
        return (
            <form className="add-support-staff-form">
                <input name="name" type="text" value={this.state.name} onChange={this.onFieldChange('name').bind(this)}/>
            </form>
        )
    }

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

export default MyForm;

当我运行我的应用程序,我得到以下警告:

警告:MyForm正在将文本类型的未受控输入更改为 控制。输入元素不应该从不受控切换到 控制(反之亦然)。决定是使用受控的还是 在组件的生命周期内不受控制的输入元素

我相信我的输入是受控的,因为它有一个值。我在想我做错了什么?

我使用的是React 15.1.0


当前回答

当你第一次呈现你的组件时,this.state.name没有设置,所以它的值为undefined或null,你最终将value={undefined}或value={null}传递给你的输入。

当ReactDOM检查一个字段是否受控制时,它会检查value != null(注意它是!=,而不是!==),由于JavaScript中的undefined == null,它决定它是不受控制的。

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

如果你这样做。在你的构造函数中State = {name: "},因为" != null,你的输入将一直有一个值,并且该消息将消失。

其他回答

在我的例子中,组件正在重新呈现并抛出一个组件正在将一个不受控制的输入类型复选框更改为受控错误。事实证明,这种行为是不保持复选框复选状态为真或假的结果(有时我得到undefined)。这里是我的错误组件的样子:

import * as React from 'react';
import { WrappedFieldProps } from 'redux-form/lib/Field';

type Option = {
  value: string;
  label: string;
};

type CheckboxGroupProps = {
  name: string;
  options: Option[];
} & WrappedFieldProps;


const CheckboxGroup: React.FC<CheckboxGroupProps> = (props) => {

  const {
    name,
    input,
    options,
  } = props;

  const [value, setValue] = React.useState<string>();
  const [checked, setChecked] = React.useState<{ [name: string]: boolean }>(
    () => options.reduce((accu, option) => {
      accu[option.value] = false;
      return accu;
    }, {}),
  );

  React.useEffect(() => {
    input.onChange(value);

    if (value) {
      setChecked({
        [value]: true, // that setChecked argument is wrong, causes error
      });
    } else {
      setChecked(() => options.reduce((accu, option) => {
        accu[option.value] = false;
        return accu;
      }, {}));
    }

  }, [value]);

  return (
    <>
      {options.map(({ value, label }, index) => {
        return (
          <LabeledContainer
            key={`${value}${index}`}
          >
            <Checkbox
              name={`${name}[${index}]`}
              checked={checked[value]}
              value={value}
              onChange={(event) => {
                if (event.target.checked) {
                  setValue(value);
                } else {
                  setValue(undefined);
                }
                return true;
              }}
            />
            {label}
          </LabeledContainer>
        );
      })}
    </>
  );
};

为了解决这个问题,我把useEffect改成了这个

React.useEffect(() => {
  input.onChange(value);

  setChecked(() => options.reduce((accu, option) => {
      accu[option.value] = option.value === value;
      return accu;
    }, {}));

}, [value]);

这使得所有复选框的状态都保持为true或false,而不会陷入未定义状态,即从React切换到开发人员,反之亦然。

如果组件上的道具是作为状态传递的,则为输入标记设置默认值

<input type="text" placeholder={object.property} value={object.property ? object.property : ""}>

我知道其他人已经回答了这个问题。但这里有一个非常重要的因素,可能会帮助其他经历类似问题的人:

你必须有一个onChange处理程序添加在您的输入字段(例如textField,复选框,无线电等)。始终通过onChange处理程序处理活动。

例子:

<input ... onChange={ this.myChangeHandler} ... />

当你使用复选框时,你可能需要用!!来处理它的选中状态。

例子:

<input type="checkbox" checked={!!this.state.someValue} onChange={.....} >

参考:https://github.com/facebook/react/issues/6779 # issuecomment - 326314716

这种情况通常只发生在应用程序启动时,您没有控制字段的值,而在某些事件或某些函数触发或状态改变后,您现在试图控制输入字段中的值。

这种从无法控制输入到可以控制输入的转变是导致问题发生的首要原因。

避免这种情况的最佳方法是在组件的构造函数中为输入声明一些值。 这样,输入元素在应用程序开始时就有了值。

在构造函数中将字段值设置为“”(空字符串)的一个潜在缺点是,如果该字段是一个可选字段,并且未被编辑。除非在发布表单之前做一些处理,否则该字段将作为空字符串持久化到数据存储中,而不是NULL。

这个选项将避免空字符串:

constructor(props) {
    super(props);
    this.state = {
        name: null
    }
}

... 

<input name="name" type="text" value={this.state.name || ''}/>