Question

我一直在：

警告：setState（...）：只能更新已安装或已安装零件。这通常意味着您在已卸载时调用了setState（）零件。这是一个无操作。请检查SearchInput的代码成分

我试过以下这些：
https://facebook.github.io/react/docs/two-way-binding-helpers.html#linkedstatemixin-before-and-after

https://stackoverflow.com/questions/21029999/react-js-identifying-different-inputs-with-one-onchange-handler

https://stackoverflow.com/questions/28773839/react-form-onchange-setstate-one-step-behind

问题很简单：当用户输入输入字段时，通过onChange属性和setState

捕获输入

import React, { Component } from 'react';

class SearchInput extends Component {
  constructor() {
    super();
    this.state = {
      inputValue: ''
    };
    this.onChange = this.onChange.bind(this);
  }

  render() {
    return (
      <input
        type="text"
        value={this.state.inputValue}
        onChange={this.onChange} />
    );
  }

  onChange(e) {
    console.log('yo');
    this.setState({ inputValue: e.target.value });
  }
}

export default SearchInput;

如何安装组件以便警告消失，我可以更新用户输入状态？

更新
我最近将.babelrc文件更改为：

{
  "presets": ["latest-minimal", "stage-1", "react"],
  "plugins": ["react-hot-loader/babel"]
}

在此之后：https://github.com/gabmontes/babel-preset-latest-minimal

但是一旦我回到以前的状态：

{
  "presets": ["es2015", "stage-1", "react"],
  "plugins": ["react-hot-loader/babel"]
}

警告消失了。

latest-minimal中的某些东西没有被甩掉。

Answer 1

使用defaultValue而不是value。

render() {
 return (
  <input
    type="text"
    defaultValue ={this.state.inputValue}
    onChange={this.onChange} />
 );
}

结帐这个不受控制的组件概念：

https://facebook.github.io/react/docs/forms.html#uncontrolled-components

基本上，当你设置值使用表达式时，Input会保持自己的状态，它会在渲染SearchInput组件时触发输入组件（未安装的组件）的状态更改。

在安装或安装时对此.setState警告做出反应

1 个答案: