Блог

Я использую react, и в моем коде я использую выпадающий список, и теперь я хочу получить это значение и сохранить его в переменной, чтобы использовать его для моего sql-запроса. Но я не нашел ничего, что работает, можете ли вы предложить мне решение? вот мой код, и я хочу сохранить разные значения выбранного параметра в каждом выпадающем списке в элементах состояния

 import React, { Component, useState } from 'react';
import {
  Container, Col, Form,
  FormGroup, Label, Input,
  Button, Dropdown,
} from 'reactstrap';
import Axios from "axios";
import './App.css';
import Table from './Table';
import { BrowserRouter, BrowserRouter as Router, Link, Route, Switch } from "react-router-dom"
import OFFRE from './offres';
const App = ({
  children
}) => {
  

const state= { // here were i want to store all my dropdown values for each one
  Source:'',
  Technology:'',
  Contract:'',
  Remote: false,
};

  return (
    <div>
      <nav className="box">

        <div className="element sourcedropdown" >
          <label>Source :</label>
          <select className="form-control" name="Sources">
            <option selected>Select Source</option>
            <option value="welcometothejungle">Welcome To The Jungle</option>
            <option value="2">Indeed</option>
            <option value="3">Angellist</option>
          </select>

        </div>

        <div className="element Techdropdown">
          <label>Technology :</label>
          <select className="form-control" name="Tech">
            <option selected>Select Technology</option>
            <option className="dropdown-item" value="1">React</option>
            <option className="dropdown-item" value="2">Node</option>
            <option className="dropdown-item" value="3">Angular</option>
          </select>
        </div>


        <div id="contrat" className="element contrat">
          <label>Contract :</label>
          <select className="form-control" name="Tech">
            <option selected>Select contract</option>
            <option className="dropdown-item" value="1">CDD</option>
            <option className="dropdown-item" value="2">CDI</option>
            <option className="dropdown-item" value="3">Stage</option>
            <option className="dropdown-item" value="3">Alternance</option>
          </select>
        </div>
        <div id="checkbox" className="element checkbox">
          <label check>
            <input type="checkbox"/>{' '}
          Remote
         </label>
        </div>


      </nav>

      {/* <Switch>
                <Route path="/startups" component={Table}> 
                 
                </Route>
             </Switch> */}
      {children}


    </div>


  );

}


export default App; 

 import React, { Component, useState } from 'react';
import {
  Container, Col, Form,
  FormGroup, Label, Input,
  Button, Dropdown,
} from 'reactstrap';
import Axios from "axios";
import './App.css';
import Table from './Table';
import { BrowserRouter, BrowserRouter as Router, Link, Route, Switch } from "react-router-dom"
import OFFRE from './offres';
const App = ({
  children
}) => {
  

const state= { // here were i want to store all my dropdown values for each one
  Source:[{label:"Welcome To The Jungle",value:"welcometothejungle"},{label:"Indeed",value:"2"}],
  Technology:[{label:"React",value:"1"},{label:"Node",value:"2"}],
  Contract:[{label:"CDD",value:"1"},{label:"CDI",value:"2"}],,
  Remote: false,
};

  return (
    <div>
      <nav className="box">

        <div className="element sourcedropdown" >
          <label>Source :</label>
          <select className="form-control" name="Sources">
          this.state.Source.map(item => <option onChange={ (e) => this.setState({selectedSource: e.target.value}) } key={item.value}value={item.value}> {item.label}</option>)
          </select>

        </div>

        <div className="element Techdropdown">
          <label>Technology :</label>
          <select className="form-control" name="Tech">
            <option selected>Select Technology</option>
            <select className="form-control" name="Sources">
            this.state.Technology.map(item => <option onChange={ (e) => this.setState({selectedTechnology: e.target.value}) } key={item.value}value={item.value}> {item.label}</option>)
            </select>
          </select>
        </div>


        <div id="contrat" className="element contrat">
          <label>Contract :</label>
          <select className="form-control" name="Tech">
            <option selected>Select contract</option>
            <select className="form-control" name="Sources">
            this.state.Contract.map(item => <option onChange={ (e) => this.setState({selectedContract: e.target.value}) } key={item.value}value={item.value}> {item.label}</option>)
            </select>
          </select>
        </div>
        <div id="checkbox" className="element checkbox">
          <label check>
            <input onChange={(e) => { this.setState({isRemote: e.target.value})}} type="checkbox"/>{' '}
          Remote
         </label>
        </div>


      </nav>

      {/* <Switch>
                <Route path="/startups" component={Table}> 
                 
                </Route>
             </Switch> */}
      {children}


    </div>


  );

}


export default App;