React-Mobx 警告：组件正在更改不受控制的输入

Posted 2023-02-21

【中文标题】React-Mobx 警告：组件正在更改不受控制的输入

【英文标题】：React-Mobx Warning: A component is changing an uncontrolled input

【发布时间】：2018-11-15 20:46:24

【问题描述】：

我使用 React + TypeScript + Mobx。我用输入制作了表单，一切正常，但浏览器出错。我做错了什么？

警告：组件正在更改要控制的文本类型的不受控制的输入。输入元素不应从不受控切换到受控（反之亦然）。决定在组件的生命周期内使用受控输入元素还是不受控输入元素。

表格：

@observer
export class SearchForm extends React.Component 

    @observable
    private _inputText: string;

    submitForm = (event: SyntheticEvent<htmlFormElement>) => 
    event.preventDefault();
    

    render() 
      return (
        <form onSubmit=this.submitForm>
          <InputField
            value=this._inputText
            onChange=action((value: string) => this._inputText = value)
          />
       </form>
    );

输入：

interface Props 
  value: string;
  onChange: (inputText: string) => void;


@observer
export class InputField extends React.Component<Props> 

  onChange = (event: SyntheticEvent<HTMLInputElement>) => 
  this.props.onChange(event.currentTarget.value);
  

  render() 
    return (
      <div>
        <input
          type="text"
          value=this.props.value
          onChange=this.onChange
        />
     </div>
   );
 

【问题讨论】：

你的input实际上是被控制的，所以我看不出问题。也许您的代码中某处还有另一个不受控制的输入元素？

不，我在项目中只有一个输入

你能设置一个 plunkr、codepen 或类似的工具来重现这个问题吗？

【参考方案1】：

React 的输入是根据输入上是否存在 value 属性来控制/不受控制的。您正在传递 value 道具，但 _inputText 以 undefined 开头。并且当 input 的值开始 undefined 时，React 将始终以不受控制的模式启动 input。

一旦您输入输入，_inputText 就不再是未定义的，并且输入切换到受控模式，您会收到警告。

对于您的情况，解决方法很简单；只需将_inputText 初始化为空字符串：

@observable
private _inputText: string = '';

您还可以调整您的 <InputField /> 以强制 undefined value props 为空字符串：

  render() 
    return (
      <div>
        <input
          type="text"
          value=this.props.value == null ? '' : this.props.value
          onChange=this.onChange
        />
     </div>
   );