inputはcomponentDidUpdateに焦点を当てていません

Question

私はデフォルトで無効になっている入力を持っていますが、有効にするアクションをディスパッチすると有効になります。私はまた、この入力が集中するようにしたいが、私はそれを行うことはできません。ここに私のコンポーネントがあります：

class UserInput extends Component { 
    constructor (props) { 
     super(props); 

     this.state = { responseValue: '' }; 

     this.responseHandler = this.responseHandler.bind(this); 
     this.submitAnswer = this.submitAnswer.bind(this); 
    } 

    componentDidUpdate (prevProps) { 
     if (!this.props.disable && prevProps.disable) { 
      this.userInput.focus(); 
     } 
    } 

    responseHandler (e) { 
     this.setState({ responseValue: e.target.value }); 
    } 

    submitAnswer() { 
     this.props.submitUserAnswer(this.state.responseValue); 
     this.setState({ responseValue: '' }) 
    } 

    render() { 
     return (
      <div className="input-container"> 
       <input ref={(userInput) => { this.userInput = userInput; }} 
         className="input-main" 
         disabled={this.props.disable} 
         value={this.state.responseValue} 
         onChange={this.responseHandler} 
       /> 
       <button className="input-button" onClick={this.submitAnswer}>{this.props.strings.SEND}</button> 
      </div> 
     ); 
    } 
} 

UserInput.defaultProps = { 
    strings: { 
     'SEND': 'SEND', 
    }, 
}; 

UserInput.contextTypes = { 
    addSteps: React.PropTypes.func, 
}; 

export default Translate('UserInput')(UserInput); 

ありがとうございます！

Answer 1

私も無効入力にプレースホルダを追加するために必要なので、私は、これをやってしまった：

class UserInput extends Component { 
    constructor (props) { 
     super(props); 

     this.state = { responseValue: '' }; 

     this.responseHandler = this.responseHandler.bind(this); 
     this.submitAnswer = this.submitAnswer.bind(this); 
    } 

    responseHandler (e) { 
     this.setState({ responseValue: e.target.value }); 
    } 

    submitAnswer() { 
     this.props.submitUserAnswer(this.state.responseValue); 
     this.setState({ responseValue: '' }) 
    } 

    render() { 
     return (
      <div className="input-container"> 
       { this.props.disable 
        ? <div className="disable-input-box">Wait to type your response</div> 
        : <input 
         className="input-main" 
         disabled={this.props.disable} 
         value={this.state.responseValue} 
         onChange={this.responseHandler} 
         autoFocus 
        /> 
       } 
       <button className="input-button" onClick={this.submitAnswer}>{this.props.strings.SEND}</button> 
      </div> 
     ); 
    } 
} 

Answer 2

私はあなたの問題はここにある数える：

if (!this.props.disable && prevProps.disable) { 
    this.userInput.focus(); 
} 

this.props.disableはまだアップデート（それは私が見ることができるものから、親コンポーネントによって更新されていない）ので、呼び出し後（false）をその初期値になりますfocusは呼び出されません。