Я пытаюсь написать (два) нескольких выбранных параметра, используя две функции изменения дескриптора, я не думаю, что это не лучшая практика, поскольку два выбранных параметра я должен связать эти данные отдельно, не нарушая другой вариант с несколькими выбранными.
import React, { Component } from 'react';
class AddEvent extends Component {
constructor() {
super();
this.state = {
speaker: [''],
hash_tag: ['']
};
this.handleChangeEvent = this.handleChangeEvent.bind(this);
}
handleChangeEvent(event) {
var options = event.target.options;
var value = [];
for (var i = 0, l = options.length; i < l; i++) {
if (options[i].selected) {
value.push(options[i].value);
}
}
this.setState({ value: value });
}
handleChangeEvent(event2) {
var options2 = event2.target.options;
var value2 = [];
for (var j = 0, l = options2.length; j < l; j++) {
if (options2[j].selected) {
value2.push(options2[j].value);
}
}
this.setState({ value: value2 });
}
render() {
return (
<div className = "col-md-12">
<h3>Add Events</h3>
<form onSubmit = {this.handleSubmit}>
<div className = "col-md-6">
<div className = "form-group">
<label>Event Speaker:</label>
<select
data-style = "btn-default"
className = "form-control"
multiple
data-max-options = "3"
value = {this.state.value}
onChange = {this.handleChangeEvent}
>
<option value = "Vivek Srinivasan">Vivek Srinivasan</option>
<option value = "Salma Moosa">Salma Moosa</option>
<option value = "Rengaprasad">Rengaprasad</option>
</select>
</div>
</div>
<div className = "col-md-6">
<div className = "form-group">
<label>Event Hash Tags:</label>
<select
data-style = "btn-default"
className = "form-control"
multiple
data-max-options = "3"
value = {this.state.value}
onChange = {this.handleChangeEvent2}
>
<option value = "hash_tag_1">hash_tag_1</option>
<option value = "hash_tag_2">hash_tag_2</option>
<option value = "hash_tag_3">hash_tag_3</option>
<option value = "hash_tag_4">hash_tag_4</option>
<option value = "hash_tag_5">hash_tag_4</option>
</select>
</div>
</div>
<div className = "col-md-12">
<div className = "form-group">
<label>Event Content</label>
<textarea
id = "summernote"
value = "Type Here "
onChange = {val => this.setState({ content: val.target.value })}
/>
</div>
</div>
<div className = "col-md-3">
<button className = "btn btn-block btn-primary btn-lg" type = "submit">
Save Event
</button>
</div>
</form>
</div>
);
}
}
export default AddEvent;





Я не совсем понимаю, почему вы не хотите использовать разные обработчики для каждого элемента select. Тем более, что вы уже написали две функции-обработчики. Возможно, я неправильно понял ваш вопрос.
На мой взгляд, у вас три основные проблемы.
1) У вас не может быть двух функций с одинаковым именем, как у handleChangeEvent.
2) В вашем текущем коде вы ссылаетесь на несуществующую функцию (handleChangeEvent2).
3) В обеих функциях handleChangeEvent вы заменяете свойство value в состоянии другим, поскольку обе изменяют значение свойства в состоянии.
Переименование последней функции handleChangeEvent в handleChangeEvent2 решит проблемы 1 и 2.
Третья проблема может быть решена за счет наличия в вашем состоянии двух свойств значений, например значение1 и значение2 (хотя я бы предложил использовать более наглядные имена).
Я сделал для вас jsfiddle: https://jsfiddle.net/69z2wepo/312520/. Самым большим изменением является то, что я добавил по одной функции дескриптора для каждого элемента select. Кроме того, я изменил функции дескриптора, чтобы использовать сокращение вместо цикла for (но на самом деле в этом не было необходимости, вы можете использовать цикл так же, как и раньше). Для пояснения я изменил имена некоторых переменных и добавил вывод, чтобы убедиться, что это работает. Удачи!
Я пробовал это не работает, не могли бы вы дать мне какое-нибудь другое решение .. Любое, если еще условие необходимо здесь?