Django 如何渲染元素取决于react中的选择值

我是react的新手，我想根据选择的值呈现不同的HTML元素 如果可能的话，将选定html中的数据发布到django模型

以下是我的代码：

类重新复制扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
选中：“默认值”
};
}
setSelected=（事件）=>{
让select=document.getElementById（“id_field1”）；
document.getElementById（“test”）.innerHTML=select.value；
}
render（）{
返回(
某物
未选择食物类型
汉堡
披萨
{
this.state.selected==“默认值”？
违约
：this.state.selected==“汉堡”？
汉堡
：比萨饼
}
添加到托盘中
);
}
}

---

您确实需要阅读react文档。和javascript文档

您的选择应如下所示：

  setSelected = event => {
      this.setState({ selected: event.target.value });
  }

类重新复制扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
已选择：“”
};
}
setSelected=（事件）=>{
this.setState（{selected:event.target.value}）
}
handleSubmit=（e）=>{
e、 预防默认值（）；
警报（this.state.selected）
}
render（）{
返回(
某物
未选择食物类型
汉堡
披萨
{this.state.selected}
{this.state.selected===“”？
：this.state.selected==“汉堡”？
汉堡
：比萨饼
}
添加到托盘中
);
}
}

您正在使用react直接操作DOM？这是个大问题。我该怎么办？解决方案please@Alirezatafhim检查此解决方案，如果要将数据发布到handleSubmit函数中的后端调用api，请使用它。@vahid_akhtar onSubmit运行良好！，你能检查一下编辑吗？我还需要另一个代码！：）@Alirezatafhim检查这个，让我知道你想要什么？是的，类似这样，但例如，当用户单击burger时，它会显示burger Specific HTML元素。。。比萨饼或其他东西的渲染应该是这样的。。。对不起，我的英语不好：（@Alirezatafhim你想一次显示选定的项目，对吗？是的，类似的，当用户点击“选定”选项时，我需要它为他们在“食物分区”中显示选定的食物…你明白我的意思了吗？

class Resepy extends React.Component {
  constructor(props){
    super(props);
    this.state = {
        selected : ''
    };
  }

  setSelected = (event) => {
    this.setState({selected: event.target.value})
  }
  handleSubmit = (e) =>{
    e.preventDefault();
    alert(this.state.selected)
  }

  render() { 
       return (
            <div className="Resepy">
             <h1>Something</h1>
             <form onSubmit={this.handleSubmit}>
              <select id="id_field1" name="field1" 
                onChange={this.setSelected} value={this.state.selected}>
                  <option value="">Food type not selected</option>
                  <option value="burger">Burger</option>
                  <option value="pizza">Pizza</option>
                  </select>
                  <h3>{this.state.selected}</h3>
                  <div className="food">
                   {this.state.selected === "" ? 
                    <div className="default"></div>
                    : this.state.selected === "Burger" ?
                     <div className="burger">Burger</div>
                    :<div className="pizza">Pizza</div>
                    }
                  </div>
                  <button type="submit">Add to tray</button>
                  </form>
             </div>
        );
  }
}