反应js-重新渲染时输入失去焦点

Question

我正在编写文本输入，并在onChange事件中调用setState，因此React重新呈现我的UI。问题是文本输入总是失去焦点，所以我需要为每个字母重新聚焦：D。

var EditorContainer = React.createClass({

    componentDidMount: function () {
        $(this.getDOMNode()).slimScroll({height: this.props.height, distance: '4px', size: '8px'});
    },

    componentDidUpdate: function () {
        console.log("zde");
        $(this.getDOMNode()).slimScroll({destroy: true}).slimScroll({height: 'auto', distance: '4px', size: '8px'});
    },

    changeSelectedComponentName: function (e) {
        //this.props.editor.selectedComponent.name = $(e.target).val();
        this.props.editor.forceUpdate();
    },

    render: function () {

        var style = {
            height: this.props.height + 'px'
        };
        return (
            <div className="container" style={style}>
                <div className="row">
                    <div className="col-xs-6">
                    {this.props.selected ? <h3>{this.props.selected.name}</h3> : ''}
                    {this.props.selected ? <input type="text" value={this.props.selected.name} onChange={this.changeSelectedComponentName} /> : ''}
                    </div>
                    <div className="col-xs-6">
                        <ComponentTree editor={this.props.editor} components={this.props.components}/>
                    </div>
                </div>
            </div>
        );
    }

});

Answer 1

如果是react路由器内的问题

<Route path="/user" render={() => <UserPage/>} />

失去焦点是因为组件prop每次都使用React.createElement，而不仅仅是重新呈现更改。

详情如下：https://reacttraining.com/react-router/web/api/Route/component

Answer 2

我一次又一次地回到这里，最后总是在别处找到解决问题的办法。所以，我将在这里记录它，因为我知道我会再次忘记它！

在我的案例中，input失去焦点的原因是我在状态更改时重新呈现了input。

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

class SuperAwesomeComp extends React.Component {
  state = {
    email: ''
  };
  updateEmail = e => {
    e.preventDefault();
    this.setState({ email: e.target.value });
  };
  render() {
    const Container = styled.div``;
    const Input = styled.input``;
    return (
      <Container>
        <Input
          type="text"
          placeholder="Gimme your email!"
          onChange={this.updateEmail}
          value={this.state.email}
        />
      </Container>
    )
  }
}

所以，问题是我总是在一个地方开始编写所有代码，以便快速测试，然后将其分解为单独的模块。但是，在这里，这种策略适得其反，因为在输入更改时更新状态会触发渲染函数，而焦点会丢失。

修复很简单，从一开始就进行模块化，换句话说，“将输入组件移出渲染功能”

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

const Container = styled.div``;
const Input = styled.input``;

class SuperAwesomeComp extends React.Component {
  state = {
    email: ''
  };
  updateEmail = e => {
    e.preventDefault();
    this.setState({ email: e.target.value });
  };
  render() {
    return (
      <Container>
        <Input
          type="text"
          placeholder="Gimme your email!"
          onChange={this.updateEmail}
          value={this.state.email}
        />
      </Container>
    )
  }
}

参考解决方案：https://github.com/styled-components/styled-components/issues/540#issuecomment-283664947

Answer 3

没有看到代码的其余部分，这只是猜测。创建EditorContainer时，请为组件指定唯一键：

当重新渲染发生时，如果看到相同的键，这将告诉React不要重击并重新生成视图，而是重用。那么聚焦的项目应该保留焦点。