Реагировать: Выполнить разные операции в зависимости от выпадающего списка выбора

Question

У меня есть следующая форма в React.То, что я хочу сделать, это отправить запрос POST, если опция из тега выбора, является Участвовать.

<form action={this.props.action} method="POST" onSubmit={this.handleSubmit}>
    <div className="ui action input">
        <input type="text" placeholder="Enter code" name="code"/>
        <select className="ui compact selection dropdown">
            <option value="participate">Participate!</option>
            <option value="check_status">Check status</option>
         </select>
         <button>
             Submit
         </button>
     </div>
 </form>

Это моя функция handleSubmit:

handleSubmit = (event) => {
    event.preventDefault();

    // HERE I want to check if the option as Participate, and then to the following code:

    // Sudo code here
    // IF STATEMENT event.target.value.option === 'participate'

    const data = {id: this.state.code, is_winner: true};

    fetch('/api/add_user', {
        method: 'POST',
        headers: {
            'Content-type': 'application/json',
        },
        body: JSON.stringify(data),
    })
        .then(res => res.json());

    // ElSE
    // DO NOT SOMETHING ELSE (NOT POST)
};

Answer 1

Сначала я бы порекомендовал вам присвоить атрибут name для вашего select элемента, подобного этому

<select name="my-dropdown" className="ui compact selection dropdown">

Затем внутри вашего handleEvent метода вы можетеполучить доступ к значениям в вашей форме

const elementRef = Array.from(event.target.elements).find(
  e => e.name === "my-dropdown"
);

// Here is the value from your dropdown selection
// that you can use to perform requests
console.log("Selection Value", elementRef.value);

Answer 2

Чтобы сделать это способом «Реагировать», вам нужно захватить событие выбора поля onChange:

<select onChange={e=>this.setState({selectedOption:e.target.value})} className="ui compact selection dropdown">

Тогда ваша проверка состояния будет выглядеть примерно так:

if (this.state.selectedOption === 'participate') {...