Question

我有两个组成部分：

在我的父组件中，我有：

    //set focus object to false
    // include Child Component and React libraries
    const parent = React.createClass({
    getInitialState: function() {
      return {
        focus: false
      };
    },
      render() {
        return(
          <div>
            <Child focus={this.state.focus} />
            <a onClick={this._handleClick}>Click me</a>
          </div>
        );
      },

      _handleClick: function() {
        this.setState({focus: !this.state.focus});
      },
    };

在我的Child组件中，我有一个输入标签：

 const child = React.createClass({
      render() {
        return(
          <div>
            <input type="text" ref="input" />
          </div>
        );
      },

  componentWillReceiveProps: function() {
    this.refs.input.focus();
  },
};

总之，我在我的方法中尝试做的是通过更改prop调用componentWillReceiveProps来专注于输入标记。但是现在这不起作用。它最终只关注锚标签。我知道我做错了什么？

编辑：为了进一步详细说明我的问题，一旦我点击锚标签，子组件中的输入元素就不会被关注。我怎样才能让它专注于？

Answer 1

componentWillReceiveProps在孩子的render方法之前执行。因此，render可能会在获得焦点之后立即破坏input元素。您最有可能只需将componentWillReceiveProps更改为componentDidUpdate，就可以了。

在反应中单击锚标记后，将焦点设置在输入元素上

1 个答案: