Как визуализировать элементы зависит от выбранного значения в реагировать

Question

Я новичок в реакции, и я хотел сделать разные HTML-элементы, в зависимости от выбранного значения. И если это возможно, данные POST в выбранной модели html to django

вот мой код реакции js:

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

  setSelected = (event) => {
      let select = document.getElementById("id_field1");
      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>
        );
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

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

Answer 2

Вам действительно нужно прочитать документацию по реакции. И javascript документация.

Ваш setSelected должен быть таким:

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