Reactjs React+样式化组件：每个渲染设置状态重置所有组件

我无意中发现了一个带有React+样式组件的停止秀的谜团。我完全不知所措

以下是我的组件：

import React from 'react';
import styled from "styled-components";

class SearchBar extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            searchStr: '',
            isEditing: false,
            isSearching: false,
            isIdle: true,
            activeMode: 'search'
        };
    }

    onChange=(e)=>{
        console.log("on change input");
        this.setState( {
            ...this.state
        }, () => {
            // nada...
        });
    };


    render () {

        const SearchBarStyle = styled.div`
            height: 85%;
            `;

        return (
            <SearchBarStyle>
                <input type="text" onChange={this.onChange} placeholder="Search"/>
            </SearchBarStyle>
        );
    }
}


export default SearchBar;

问题是：只要我开始输入，就会调用setState。当这种情况发生时，一切都会重置！我输入的第一个字符被删除，输入控件从头开始，显示占位符提示

下面是一些令人费解的东西：

如果我用一个简单的div替换，或者我从不调用setState，那么问题就不会发生。我可以自由打字。。。不知何故，在使用样式化组件构建的组件上调用setState会完全重置它

威士忌探戈狐步舞

检查此代码

问题1。未设置输入值。输入元素应该是

<input
          value={this.state.searchStr}
          type="text"
          onChange={this.onChange}
          placeholder="Search"
        />

onChange = e => {
    this.setState({ searchStr: e.target.value });
  };

您不使用状态值作为输入值，也不通过e.target.value将新值分配给状态

将searchStr从状态分配给值

在类上方声明SearchBarStyle。 每次在SearchBar组件中进行更新时，在render中声明它将重新呈现该组件。 更新状态的方式不正确。应该是： 将状态值指定给输入框。 在这里，您在每个设置状态下都使用so，您的组件将重新渲染，最终您将丢失旧值

要解决此问题，必须使用受控组件，即将输入的值属性设置为状态值，如

<input type="text" onChange={this.onChange} placeholder="Search" value={this.state.searchStr} />

---

我看到setState中的问题，您只是再次将状态设置为旧状态。这里的样式化组件没有问题，这不是问题所在。该组件已针对Stackoverflow进行了简化。为什么每次输入到输入字段时，我都会被删除？它调用setState并重置所有内容？为什么用simpe div替换可以解决问题？这与styld组件无关。请删除styled components标记已删除styled components标记此功能正常，谢谢，但现在还有另一个问题。在上更新时，每次击键都会导致焦点丢失。。。我必须重新单击输入以重新获得它。这是因为在错误的位置定义了样式化组件。更新的沙盒代码。现在焦点没有丢失。这起作用了，谢谢！但现在还有另一个问题。每次击键都会导致焦点丢失，而在屏幕上正确更新时。。。我必须重新点击输入才能再次输入。谢谢！但现在还有另一个问题。每次击键都会导致焦点丢失，而在屏幕上正确更新时。。。我必须重新点击输入才能在那里再次输入。这是正确和完整的，焦点丢失是由此造成的。你是正确的！焦点确实因此而失去。将其移到类外解决了焦点问题！我更新了我的答案，并详细说明了张贴代码中的错误。

<input
  type="text"
  value={this.state.searchStr}
  onChange={this.onChange}
  placeholder="Search"
/>

const SearchBarStyle = styled.div`
  height: 85%;
`;


class SearchBar extends React.Component {
  ..

import React from "react";
import styled from "styled-components";

const SearchBarStyle = styled.div`
  height: 85%;
`;

class SearchBar extends React.Component {
...

onChange = e => {
  console.log("on change input")
  this.setState({
    searchStr: e.target.value
  }, () => {

  });
};

  <input type="text" onChange={this.onChange} value={this.state.searchStr} placeholder="Search"/>

<input type="text" onChange={this.onChange} placeholder="Search" value={this.state.searchStr} />