样式化的组件输入失去焦点 onChange

Posted 2023-02-22

【中文标题】样式化的组件输入失去焦点 onChange

【英文标题】：Styled component input loses focus onChange

【发布时间】：2019-11-27 12:43:54

【问题描述】：

当使用带有 styled-components 的 html 输入并保存值以使用 onChange 响应状态时，组件似乎会在每次状态更改时重新渲染并导致输入失去焦点。有什么办法可以防止输入失去焦点？为什么会出现这种情况？ Here is an example。

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 )
      />
    );
  

【问题讨论】：

styled.input 创建一个新的合法反应组件。它应该在MyComponent 之外定义。如果您打算专门为特定 input 定义样式而不定义单独的组件，请考虑使用 css prop。

【参考方案1】：

在每次渲染时，您都会生成一个新的Input，因此会失去焦点。

将样式与组件解耦：

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 )
      />
    );
  

【参考方案2】：

发生这种情况是因为您在 render() 方法中定义了 Input。每次状态更新时，render() 方法将被调用，Input 将被重新定义和处理，就好像它是一个全新的组件（在这种情况下是一个没有焦点的 html <input/>）。如果将Input 的定义移出组件，它将按预期工作。此外，您在 render() 方法的返回中使用的片段 (</>) 有点毫无意义。

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 )
      />
    );
  

【参考方案3】：

正如@Dennis Vash 在每次渲染时所说，组件都会被编译。使用指向组件的链接重新编译 Styled-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)
             />
         )