Reactjs 正在尝试使用表单从名称下拉选择中获取id值。是否使用语义UI选择?
我正在React/Rails项目中使用语义UI React,并尝试使用表单。在模式中的较大表单中选择下拉菜单。我需要从显示user.name animal.gnames的选择中获取.id animal.id值-gnmaes只是我为了避免混淆而使用的一个属性 在options=prop of Form.Select中,我映射一个项目数组,然后将item.gname分配给title,为用户获得一个不错的名称下拉列表。然后我需要获取这个大数组中的id,并将其发送到一个获取请求。我尝试了各种道具组合,但无法从阵列中获取id,同时显示名称 这是代码。由于与问题无关,我将上半部分的内容切掉:Reactjs 正在尝试使用表单从名称下拉选择中获取id值。是否使用语义UI选择?,reactjs,forms,modal-dialog,semantic-ui-react,Reactjs,Forms,Modal Dialog,Semantic Ui React,我正在React/Rails项目中使用语义UI React,并尝试使用表单。在模式中的较大表单中选择下拉菜单。我需要从显示user.name animal.gnames的选择中获取.id animal.id值-gnmaes只是我为了避免混淆而使用的一个属性 在options=prop of Form.Select中,我映射一个项目数组,然后将item.gname分配给title,为用户获得一个不错的名称下拉列表。然后我需要获取这个大数组中的id,并将其发送到一个获取请求。我尝试了各种道具组合,但
import React, { Component } from "react";
import { withRouter } from "react-router-dom"
import ActiveStorageProvider from 'react-activestorage-provider'
import { Menu, Button, Modal, Header, Icon, Image, Form, Input, Select, Label } from "semantic-ui-react"
import { Link } from "react-router-dom"
const value = null
const options = null
class Navigation extends Component {
state = { modalOpen: false,
title: "",
body: "",
animal: "",
geotag: false,
animals: []
};
componentDidMount() {
fetch('http://localhost:9000/api/v1/animals')
.then(r => r.json())
.then(animals => {
this.setState({ animals: animals })
})
};
handlechange = (event) => {
this.setState({ [event.target.name]: event.target.value })
};
submitForm = (event) => {
this.props.postSighting(this.state.title, this.state.body)
// NEED TO GET ANIMAL.ID IN HERE!!!
};
// THIS METHOD IS READY TO GO FOR DOING THE ITERATION AND SET STATE BUT COULD NOT GET IT OT WORK.
// HAD ISSUE WITH A FETCH AND SET STATE LOOP CALLS
selectAnimal = () => {
const mappedAnimals = this.state.animals.map(animal => {
this.setState({ animal: animal.gname })
})
return mappedAnimals
};
render () {
return (
//.......SKIP TO THE CODE THAT MATTERS
<Form.Select
label="Animal"
name="Animal"
onChange={this.handlechange}
selection= // WHAT GOES HERE?
width={8}
value= // WHAT GOES HERE?
compact
options={this.state.animals.map(animal => ({
return
name: animal.id,
key: animal.id,
value: animal.id,
text: animal.gname
}))}
/> // HOW DO I GET ANIMAL.ID TO MY SUBMIT FORM FUNCTION?
这里发生了很多事情,所以让我试着在代码注释中一部分一部分地分解它。如果有什么不清楚,请告诉我
class Navigation extends Component {
state = {
modalOpen: false,
title: "",
body: "",
animal: "",
geotag: false,
animals: []
};
componentDidMount() {
fetch("http://localhost:9000/api/v1/animals")
.then(r => r.json())
.then(animals => {
this.setState({ animals: animals });
});
}
/**
* When a user selects an option in the dropdown, the following will happen:
* 1. this.handlechange gets called
* 2. Component's state gets updated to look like:
* {
* ...state,
* "Animal": <id of animal selected>
* }
* Side note: you will have to access this "Animal" value through this.state.Animal
* where the uppercase 'A' is very important. This is really prone to typos and not
* recommended. To fix this I would change your <Form.Select> to have a lowercase
* name attribute.
*/
handlechange = (event, { name, value }) => {
// We need to use { name, value } instead of event.target.name, etc
// due to how Semantic UI handles events. More info here:
// https://github.com/Semantic-Org/Semantic-UI-React/issues/638
this.setState({ [name]: value });
};
submitForm = event => {
this.props.postSighting(this.state.title, this.state.body);
// Recall from above that this.state.Animal contains the animal id currently selected
// so we can access it directly with this.state.Animal
const animalId = this.state.Animal;
// do stuff with animalId...
};
/**
* If this is called, it will destroy the array of animals you have in your state and replace it with a gname
* from one of the animals. You probably don't want this to happen.
* Not sure what you are trying to do here, what do you use the return value for?
* Also, this will return an array filled with 'undefined' since you don't return anything in the animals.map callback.
*/
selectAnimal = () => {
const mappedAnimals = this.state.animals.map(animal => {
this.setState({ animal: animal.gname });
});
return mappedAnimals;
};
render() {
return (
//.......SKIP TO THE CODE THAT MATTERS
<Form.Select
label="Animal"
name="Animal" // this is the name that gets passed to 'handlechange' as event.target.name
onChange={this.handlechange}
// selection: this isn't a valid prop for Form.Select and will be ignored regardless of value
width={8}
// value: we don't need to worry about this since Form.Select will handle it
compact
options={this.state.animals.map(animal => ({
// return: was this a typo?
name: animal.id,
key: animal.id,
value: animal.id, // This is the value that gets passed to 'handlechange' as event.target.value
text: animal.gname
}))}
/>
);
}
}
经过大量研究和@miyu的帮助,你发现这是可行的:
<Form.Select
fluid
onChange={this.handleChange}
placeholder='select animal'
label="Animal"
name="animal"
width={8}
selection
options={this.state.animals.map(animal => ({
name: animal.gname,
key: animal.id,
value: animal.id,
text: animal.gname
}))}
/>
好的,很好,我认为这是清理了很多事情。问:你从哪里得到这个。国家。动物?我有这个。国家。动物。我需要改成大写吗?我以前从未听说过使用大写字母的功能。另外,如果我没有在表单中显式声明下拉选择,状态如何通过下拉选择更新。选择语义组件?哦,我现在明白了。好的,对不起,我是新手。在HandleChange的调试器中调用event.target.value时,I中大写的动物仍然得到“undefined”,仍然无法捕获该值。啊,好了,我终于明白了。我的handleChange方法不正确。它应该是:handleChange=e,{name,value}=>this.setState{[name]:value}
handleChange = (e, { name, value }) => this.setState({ [name]: value })