React / Redux: focus input field in componentWillReceiveProps not working

Question

I have two components. When in component A somebody clicks a button, I want to focus an input field in component B.

I am using Redux, and in my Redux store I save dataInputFocus , and whenever this is set true, I re-render my component & want to focus the input field. This does not work however: componentWillReceiveProps(nextProps) is called and it also goes into the if (I tried some console.logs ), but this.myInp.focus(); is just not working.

// Import React
import React from 'react';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';

import {addData, setInputFocus} from '../actions/index'

// Create Search component class
class Data extends React.Component{

  constructor(props) {
    super(props);
    this.state = { value: ""};

    this.handleInputChange = this.handleInputChange.bind(this);
    this.onFormSubmit = this.onFormSubmit.bind(this);
  }

  componentWillReceiveProps(nextProps){
      if(nextProps.applicationState.dataInputFocus) {
          this.myInp.focus();
      }

  }

  onFormSubmit(e) {
    e.preventDefault();
    this.setState({value: "" });
    this.props.addData(this.state.value, this.props.preferences.type);
  }
  handleInputChange(e) {
    this.setState({value: e.target.value })
  }


  render() {
    return (
      <div>
        <form onSubmit={this.onFormSubmit}>
          <input
            placeholder="data"
            className="myInput"
            value={this.state.value}
            onChange={this.handleInputChange}
            ref={(ip) => this.myInp = ip}
          />

            <button>Add</button>



            <span>{this.props.applicationState.dataInputFocus? 'TRUE' : 'FALSE'}</span>
            {/*  I added this line in order to test whether this actually works, but also so that my component re-renders, since I would not actually use dataInputFocus anywhere other than in the conditional */}
        </form>

        <button onClick={() => {this.myInp.focus()}}>Focus Input</button>  {/* this however does(!) work */}
      </div>
    );
  }

}

// Export Search
function mapStateToProps (state) {
  return {
    data: state.data,
    preferences: state.preferences,
    applicationState: state.applicationState
  };
}

function matchDispatchToProps(dispatch) {
  return bindActionCreators({
    addData: addData
  }, dispatch);
}

export default connect(mapStateToProps, matchDispatchToProps)(Data);

This is the component which receives the props and contains the input field to be focused. Since it goes into componentWillReceiveProps and since I also checked that the props is actually changing and it goes into the if conditional, I assume that there is something wrong with this component, not my reducer / redux or the other component which contains the button and dispatches the action.

Answer 1

I have a reason that this line( this.myInp.focus(); ) is not working because the component is rendered after componentWillReceiveProps and it is not able to find ref={(ip) => this.myInp = ip} the reference of the input box... so see my idea below..

//create a state variable or global variable
var isFocus= false
 constructor(props) {
    super(props);
    this.state = { value: "" };

    this.handleInputChange = this.handleInputChange.bind(this);
    this.onFormSubmit = this.onFormSubmit.bind(this);
  }

// change value
 componentWillReceiveProps(nextProps){
      if(nextProps.applicationState.dataInputFocus) {
          isFocus= true
      }
  } 

//after getting reference from render function make it focus.. 


    componentDidMount()
     {
       if(isFocus)
        this.myInp.focus(); 
     }

Cheers :)

Answer 2

更新组件后 ，应使用componentDidUpdate对DOM进行操作，而不要使用componentWillReceiveProps（在重新渲染发生之前调用）。