ReactJS 无法禁用动态创建的按钮

Question

使用 ReactJS 我使用自定义 JSON 数据动态创建一个表单。

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

使用componentDidUpdate我想禁用所有submit按钮。 虽然成功更改了按钮的 label，但我总是无法禁用按钮。

componentDidUpdate() {
    var submitButtons = document.querySelectorAll('button[type=submit]');
    submitButtons.forEach(btn => {
        btn.innerText = 'PREVIEW';
        btn.disabled = true;
    });
}

chrome 检查器为按钮返回以下 HTML 代码。 此外，表单对象使用 Bootstrap 来实现 CSS 样式。

<button lang="en" class="btn btn-warning btn-md" type="submit" name="data[Draft]" ref="button">PREVIEW</button>

是什么阻止 JS 应用disable操作？

Answer 1

Web组件是首选方案

https://reactjs.org/docs/web-components.html

或者，我可以在 JSON 数据从 react-dom 渲染之前对其进行操作。