javascript - 样式化的组件输入失去对变化的关注

Question

当使用带有 styled-components 的 html 输入时并保存值以使用 onChange 对状态使用react，组件似乎在每次状态更改时重新呈现并导致输入失去焦点。有什么方法可以防止输入失去焦点吗？为什么会这样？ 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 })}
      />
    );
  }
}

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