Javascript 输入不关注组件更新

我有一个默认禁用的输入，但是当我分派一个操作来启用它时，它应该成为可启用的。我也希望这些信息能够集中起来，但我无法做到这一点。以下是我的组件：

 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);

class用户输入扩展组件{
建造师（道具）{
超级（道具）；
this.state={responseValue:''}；
this.responseHandler=this.responseHandler.bind（this）；
this.submitAnswer=this.submitAnswer.bind（this）；
}
componentDidUpdate（prevProps）{
如果（！this.props.disable&&prevProps.disable）{
this.userInput.focus（）；
}
}
负责人（e）{
this.setState（{responseValue:e.target.value}）；
}
提交人（）{
this.props.submitUserAnswer（this.state.responseValue）；
this.setState（{responseValue:''}）
}
渲染（）{
返回(
{this.userInput=userInput；}}
className=“输入主”
disabled={this.props.disable}
值={this.state.responseValue}
onChange={this.responseHandler}
/>
{this.props.strings.SEND}
);
}
}
UserInput.defaultProps={
字符串：{
“发送”：“发送”，
},
};
UserInput.contextTypes={
添加步骤：React.PropTypes.func，
};
导出默认翻译（'UserInput'）（UserInput）；

---

提前谢谢

我想你的问题在于：

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

---

this.props.disable

在更新后仍将是它的初始值（false）（从我看到的情况来看，它没有被父组件更新），因此对

focus

的调用永远不会被调用

我最后这样做了，因为我还需要在禁用的输入中添加一个占位符：

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

class用户输入扩展组件{
建造师（道具）{
超级（道具）；
this.state={responseValue:''}；
this.responseHandler=this.responseHandler.bind（this）；
this.submitAnswer=this.submitAnswer.bind（this）；
}
负责人（e）{
this.setState（{responseValue:e.target.value}）；
}
提交人（）{
this.props.submitUserAnswer（this.state.responseValue）；
this.setState（{responseValue:''}）
}
渲染（）{
返回(
{this.props.disable
？等待键入您的响应
: 
}
{this.props.strings.SEND}
);
}
}