样式化组件输入在更改时失去焦点

Question

当将html输入与样式化组件一起使用并将值保存为react state with onChange时，组件似乎会在每次状态更改时重新呈现，并导致输入失去焦点。有没有办法防止输入失去焦点？为什么会发生这种情况？这里有一个例子。

class MyComponent extends React.Component {
  state = { val: "" };

  render() {
    const Input = styled.input`
      border-radius: 6px;
    `;

    return (
      <Input
        value={this.state.val}
        onChange={e => this.setState({ val: e.target.value })}
      />
    );
  }
}

Answer 1

这是因为您在render（）方法中定义了Input。每次更新状态时，都会调用render（）方法，并且Input将被重新定义和处理，就像它是一个全新的组件（html

const Input = styled.input`
  border-radius: 6px;
`;

class MyComponent extends React.Component {
  state = { val: '' };

  render(){
    return(
      <Input
        value={this.state.val}
        onChange={e => this.setState({ val: e.target.value })}
      />
    );
  }
}

Answer 2

正如@Dennis Vash在每次渲染时所说的，组件都会被编译。使用指向组件的链接重新编译样式化CSS。同样，如果在函数中使用样式化组件。将其复制粘贴到函数外部，以便只创建一次变量

    const CustomInput = styled.input`
       border:none;
       border-radius:0px;
       padding:2px 11px;
       border-bottom:1px solid #ced4da;
       &:focus {
         outline: none;
         border-color:#ced4da;
       }
   `;

   function myFun(props){
         const [value, setvalue] = useState('')
         return (
             <CustomInput 
                value={value}
                onChange={(e)=>setvalue(e.target.value)}
             />
         )
   }

Answer 3

在每个渲染中，您都会生成一个新的输入，因此会失去焦点。

将样式与组件解耦：

const Input = styled.input`
  border-radius: 6px;
`;

class MyComponent extends React.Component {
  state = { val: "" };

  render() {
    return (
      <Input
        value={this.state.val}
        onChange={e => this.setState({ val: e.target.value })}
      />
    );
  }
}