ReactJS动态创建的提交按钮无法禁用问题排查

核心原因 #

你直接用原生DOM修改按钮的disabled属性无效，本质是React的数据流机制导致的：React是数据驱动视图，组件会根据自身的state和props重新渲染DOM。你在componentDidUpdate里手动改了DOM属性，但只要ShowForm组件因为src（也就是this.state.data）或者其他依赖重新渲染，React就会根据虚拟DOM的状态覆盖你手动修改的真实DOM——而你的虚拟DOM里根本没设置disabled，所以修改后会被立刻冲掉。

从你贴的Chrome调试器代码也能看出来，按钮标签里没有disabled属性，说明React并没有把这个属性纳入到它的渲染逻辑里，你的原生DOM修改只是临时生效，很快就被React的重新渲染覆盖了。

正确解决方案 #

别用原生DOM操作，用React的方式控制按钮状态：

1. 给ShowForm组件添加一个控制状态的props，比如isPreviewMode：

render() {      
    return (
        <div>       
            <ShowForm src={this.state.data} isPreviewMode={true} />
        </div>
    );
}

2. 在ShowForm组件内部，渲染提交按钮时，根据isPreviewMode来设置按钮的文本和disabled属性：

// 假设ShowForm里渲染按钮的代码示例
renderButton() {
    const { isPreviewMode } = this.props;
    return (
        <button 
            lang="en" 
            className="btn btn-warning btn-md" 
            type="submit" 
            name="data[Draft]"
            disabled={isPreviewMode}
        >
            {isPreviewMode ? 'PREVIEW' : '原来的提交文本'}
        </button>
    );
}

这样通过props传递状态，让React自己管理DOM属性，就不会出现修改失效的问题了——因为每次渲染都会根据props正确生成带有disabled属性的按钮。

内容的提问来源于stack exchange，提问作者Maverick