Javascript 使用状态实时呈现通用HTML代码

我想知道一种方法，我可以现场呈现HTML代码的页面上的表单输入

例如，此URL有一个很好的示例：

按钮文本在页面上呈现，与您键入的代码相同。-按钮的颜色是唯一不变的，但在我的例子中，我也希望按钮的颜色也能改变

我已经在想，我需要用state捕获输入值并在页面上输出它们，但我不确定如何呈现代码，以及如何根据表单中的内容进行更改

---

非常感谢您的帮助。

您可以为默认值设置一些初始状态

state = {
 color: 'blue';
}

然后在渲染中，将其连接到两个位置-输入和显示的示例

render() {
  return (
    <div>
      <div className="edit-controls">
        <input value={this.state.color} onChange={this.setColor} />
      </div>
      <div className="preview">
        <div style={{ color: this.state.color }}>
          {'The color of this text is ' + this.state.color}
        </div>
      </div>
    </div>
  )
}

---

要显示/隐藏任意HTML元素，可以根据状态有条件地呈现标记

render() {
  return (
    <div>
      {this.state.FormCheckboxChecked && <MyCheckedComponent />}
      {!this.state.FormCheckboxChecked && <div>
        <div>Check the checkbox to see the cool stuff!</div>
      </div>}
    </div>
  )
}

谢谢，这很有道理。然而，按钮只是一个例子。假设我希望其他HTML元素根据表单输入进行更改。甚至可能是网页的一部分。在表单中更改值后，如何使其在页面上呈现？从本质上讲，该功能类似于codepen，但它将是一个表单，而不是一个接受输入的文本编辑器。如果您要更改的内容和导致更改的内容是完全不相关的组件，那么它会变得更加困难，您可能需要查看redux以保持全局状态。如果只是根据表单中的选择（假设表单是组件的一部分？）显示任意标记，我可以在一个快速示例中进行编辑。抱歉，我觉得我不太明白你想要什么。添加了一个片段来展示我最初谈论的内容，这不是你描述的吗？弄乱输入，您可以看到您键入的内容反映在标记中”_(ツ)_/''谢谢你，先生，这正是我想要的！-非常感谢你的时间和努力！：）太棒了！很高兴我们弄明白了：）

render() {
  return (
    <div>
      {this.state.FormCheckboxChecked && <MyCheckedComponent />}
      {!this.state.FormCheckboxChecked && <div>
        <div>Check the checkbox to see the cool stuff!</div>
      </div>}
    </div>
  )
}