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

Question

我是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;

Answer 1

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

喜欢这个：

<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>
        );
  }
}

Answer 2

我很难理解您，但是您最有可能尝试使用原始问题中的以下代码来实现：

<div className="burger" Resepy={this.state.Resepy === 'burger'}></div>

是：

<div className="food">
  <div className={this.state.Resepy} />
</div>

工作示例（但我使用的是Hooks而不是类组件）：
 
const App = () => {
  const [selected, setSelected] = React.useState('default')
  
  const handleChange = (event) => {
    setSelected(event.target.value)
  }
  
  return (
    <div>
      <select value={selected} onChange={handleChange}>
        <option>default</option>
        <option>burger</option>
        <option>pizza</option>
      </select>
      <div className="food">
        <div className={selected}>{selected}</div>
      </div>
    </div>
  )
}


ReactDOM.render(<App />, document.getElementById('root'))
.default { color: gray; }
.burger { color: orange; }
.pizza { color: red; }
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"></div>

Answer 3

现在我想根据值呈现html元素，我尝试过此操作，但它仅显示[Object Object]

  setSelected = (event) => {
      let select = document.getElementById("id_field1");
      document.getElementById("food").innerHTML =          
                        select.value == "default" ? 
                       <div className="default">Default</div>
                       : select.value == "Burger" ?
                        <div className="burger">Burger</div>
                         : <div className="pizza">Pizza</div>
                  
  }