Обновление состояния на основе выбора объекта из раскрывающегося меню
У меня есть объект с именем TaskTypes, внутри объекта он выглядит так
-LJLQR7lVkbzsxAZC3JI: {code: "Pest & Disease", colour: "0xf2473f", deleted: null, subTypes: {…}}
-LJLQR7mZaeBNnEhdHtU: {code: "Health & Safety", colour: "0x8c5de4", deleted: null, subTypes: {…}}
-LJLQR7mZaeBNnEhdHtZ: {code: "Structure", colour: "0x6b8e23", deleted: null, subTypes: {…}}
-LJLQR7mZaeBNnEhdHtl: {code: "Repairs & Maintenance", colour: "0x66a9fb", deleted: null, subTypes: {…}}
-LJLQR7nJdpun5Tugh39: {code: "Reminders", colour: "0xf2bb61", deleted: null, subTypes: null}
-LUDgbjHzQpktk34u8-4: {code: "Sample", colour: "0x2196f3", deleted: null, subTypes: {…}}
-L_dAY_Aju0IBGwY9VVA: {code: "test", colour: "0x03a9f4", deleted: null, subTypes: null}
Первая случайная строка — это идентификатор объекта.
Я хочу, чтобы состояние taskId обновлялось каждый раз, когда я выбираю один из этих объектов, например, если я выберу «Вредители и болезни» из раскрывающегося списка, taskId будет «-LJLQR7lVkbzsxAZC3JI».
Я создал функцию для этого, однако состояние не обновляется.
this.state = { id: "", taskId: null,
taskSubId: null,
taskSubSubId: null }
setTaskType = (id: string) => {
console.info("ID:", id)
console.info("id.length:", id.length)
console.info("stateTaskId", (this.state as any).taskId)
if (id.length > 0) {
console.info("setTaskTypeFunction", this.props.metadata.TaskTypes)
this.setState({ id: id, taskId: id, taskSubId: null, taskSubSubId: null, taskType: Object.assign({}, this.props.metadata.TaskTypes[id]) })
}
}
Вот мой JSX
<select className = "input-field-slider dropdown w-select" onClick = {() => this.setTaskType("")}>
<option key = {taskId} value = {taskId}>Select A Category</option>
{
Object.keys(taskTypes)
.sort((a, b) => taskTypes[a].code.toLowerCase() >
taskTypes[b].code.toLowerCase() ? 1 : -1)
.map(taskId =>
<option onClick = {() => this.setTaskType(taskId)} value = {taskId} key = {taskId}>{taskTypes[taskId].code}</option>)}
</select>
На данный момент я показываю весь объект в раскрывающемся списке (вредители и болезни и т. д.), но мое состояние не обновляется
Ответы 1
Несколько модификаций могут помочь.
Выберите обработчик изменений
setTaskType = (event) => {
const id = event.target.value;
// continue with the rest of code
}
JSX выбрать элемент
<select className = "input-field-slider dropdown w-select" value = {this.state.taskId} onChange = {this.setTaskType}>
<option value=''>Select A Category</option>
{Object.keys(taskTypes)
.sort((a, b) => taskTypes[a].code.toLowerCase() >
taskTypes[b].code.toLowerCase() ? 1 : -1)
.map(taskId =>
<option value = {taskId} key = {taskId}>{taskTypes[taskId].code}</option>
)}
</select>
Подробнее читайте на React Docs: выберите тег