时间戳

首页 > 解决方案 > 如何渲染元素取决于所选选项？

django - 如何渲染元素取决于所选选项？

问题描述

我是 react js 的新手，我想要一个带有选择选项的表单，我希望当用户单击每个选项时，每个选项都会呈现不同的元素

class Resepy extends Component {
    state = {
        Resepy : 'default'
    }
    render() { 
        
       return = (
            <div className="Resepy">

            
            <form>
            <select id="id_field1" name="field1" onChange={(e) => this.state.Resepy = "Burger"}>
                <option value="default">Food type not selected</option>
                <option value="burger" onClick={(e) => this.setState({  Resepy: 'Burger'  })}>Burger</option>
                <option value="pizza"  onClick={(e) => this.setState({  Resepy: 'Pizza'  })}>Pizza</option>
                </select>
                <div className="food">
                { this.state.Resepy === "burger" ? <div className="burger"></div> //can return any html
                     : <div className="default">default</div>
                    }
                <div className="pizza"></div>
                <div className="food-detail"></div>
                </div>
                <button type="submit">Add to tray</button>
                </form>
            </div>
        );
}
}
 
export default Resepy;

标签： djangoreactjs

解决方案

通用三元运算符用于更易读的代码。

像这样：

<form>//can be any element
 { codition == true ? <div>It is true</div> //can return any html
                     : <div>It is false</div>
}
</form>

测试，工作。问题在于 onClick 方法选项无法调用该事件。


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

  setSelected = (event) => {
      let select = document.getElementById("id_field1");
    this.setState({selected: select.value});
      //document.getElementById("test").innerHTML = select.value;
  }

  render() { 
       return (
            <div className="Resepy">
             <h1>Something</h1>
             <form>
              <select id="id_field1" name="field1" onChange={this.setSelected}>
                  <option value="default">Food type not selected</option>
                  <option value="burger">Burger</option>
                  <option value="pizza">Pizza</option>
                  </select>
                <div id="test"></div>
                  <div className="food">{
                   (this.state.selected === "default") ? 
                       <div className="default">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>
        );
  }
}

推荐阅读