Я использую реагировать на выбор в моем коде:
import React, {Component} from 'react';
import Select, {createFilter} from 'react-select';
let _ = require('underscore')
class Test extends Component {
constructor(props) {
super(props);
this.state = {
variables_api: [],
selected_question_obj: null
};
this.handleChange_question = this.handleChange_question.bind(this)
}
componentDidMount() {
fetch('http://127.0.0.1:5000/variables')
.then(res => {
return res.json()})
.then(data => {
this.setState({
variables_api: data
});
})
}
handleChange_question(evt) {
this.setState({
selected_question_obj: evt
});
}
render () {
var key_api = this.state.variables_api.map(obj => {
return {
key_api: obj['index'],
question_api: obj['Label Variabile'],
};
})
var key = _.groupBy(key_api, 'question_api');
var question_uni = Object.keys(key);
var selector_q_options = []
for (var i=0; i<question_uni.length; i++) {
var temp_0 = {
key: i.toString(),
label: question_uni[i]
};
selector_q_options.push(temp_0)
}
console.log(this.state)
return (
<div>
<Select
name='question_selector'
value={this.state.selected_question_obj}
onChange={this.handleChange_question.bind(this)}
options={selector_q_options}
filterOption={createFilter({ignoreAccents: false})}
placeholder='Select question:'/>
</div>
);
};
}
export default Test
Все работает отлично, ожидайте того факта, что когда я выбираю что-то, я получаю это предупреждение:
Компонент изменяет контролируемый вход скрытого типа на неконтролируемый. Входные элементы не должны переключаться с контролируемого на неуправляемый (или наоборот). Выберите между использованием контролируемого или неконтролируемого элемента ввода в течение срока службы компонента.
Если я подставил selected_question_obj с нуля на {}, ошибка исчезнет, но затем компонент не будет отображаться правильно (например, если вы уже что-то выбрал).
Можете ли вы мне помочь, пожалуйста? Если вы видите что-то странное в коде, имейте в виду, что я использую оба js и реагирую менее месяца, поэтому любые комментарии приветствуются. Спасибо!