如何在react.js中构建动态选择框
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在react.js中构建动态选择框相关的知识,希望对你有一定的参考价值。
我有一个项目,用户可以输入一些输入,然后将数据推送到mongDB实例。然后我有一个搜索栏,用户可以在其中拉下数据,一旦他们点击选定的ID,然后将所有相应的文档信息放入一些文本字段供用户查看。
我的问题是选择一个项目部分,它可以工作,如果用户点击它填充字段的ID。但是我把它们放在H1标签中进行测试,它会为每个ID显示一个H1。
现在我将它移动到一个选择字段中,我看到它。
我只需要在一个选择框中显示每个ID,而不是为每个ID重新渲染一个框
这是我目前的代码:
import React from "react";
import PropTypes from "prop-types";
import { Form, FormGroup, Input, Container, Row, Col, Label } from "reactstrap";
import "./Search.css";
import axios from "axios";
import SearchBox from "react-search-box";
class Search extends React.Component {
static propTypes = {
handleCustomer: PropTypes.func.isRequired
};
constructor(props) {
super(props);
this.state = {
searchInfo: [],
query: "",
companyFilter: ""
};
this.itWorks = this.itWorks.bind(this);
this.handleSearch = this.handleSearch.bind(this);
}
search = query => {
let filter = {};
if (this.state.companyFilter) {
filter = {
customerID: {
$regex: ".*" + this.state.companyFilter + ".*",
$options: "i"
}
};
}
let url = "http://localhost:5000/getData?filter=" + JSON.stringify(filter);
axios.get(url).then(res => {
const searchInfo = (res.data || []).map(obj => ({
customerID: obj.customerID,
company: obj.companyName,
sinage: obj.sinageCodes,
curtain: obj.curtainCodes,
method: obj.Method,
notes: obj.Notes
}));
this.setState({ searchInfo });
console.log(searchInfo);
});
};
itWorks() {
this.setState({
companyFilter: document.getElementById("exampleSearch").value
});
}
handleSearch = e => {
if (e.key === "Enter") {
this.search();
}
};
componentDidMount() {
this.search("");
}
render() {
const { query, searchInfo } = this.state;
return (
<div>
<Container>
<FormGroup>
<Label for="exampleSearch" />
<Input
type="search"
name="search"
id="exampleSearch"
placeholder="Search for a CumstomerID"
onChange={this.itWorks}
onKeyPress={this.handleSearch}
/>
</FormGroup>
</Container>
{this.state.searchInfo.map(function(searchInfo, index) {
return (
<FormGroup>
<Label for="exampleSelectMulti">Select customerID</Label>
<Input
onChange={this.state.value}
onClick={() => this.props.handleCustomer(searchInfo)}
type="select"
name="selectMulti"
id="exampleSelectMulti"
multiple
>
<option key={index}>
{" "}
{searchInfo.customerID.match(
new RegExp(this.state.companyFilter, "i")
) || this.state.companyFilter === ""
? "customerID: " + searchInfo.customerID
: ""}
</option>
</Input>
</FormGroup>
);
}, this)}
</div>
);
}
}
export default Search;
搜索功能正常工作,只需从我的API中获取所有返回的数据即可在一个选择框中显示。
谢谢!
答案
您可能想要映射选项。像这样的东西。
<FormGroup>
<Label for="exampleSelectMulti">Select customerID</Label>
<Input
onChange={this.handleChange}
type="select"
name="selectMulti"
id="exampleSelectMulti"
value={this.state.value}
multiple
>
{this.state.searchInfo.map(function(searchInfo, index) {
<option key={index}>
{" "}
{searchInfo.customerID.match(
new RegExp(this.state.companyFilter, "i")
) || this.state.companyFilter === ""
? "customerID: " + searchInfo.customerID
: ""}
</option>
</Input>
</FormGroup>
以上是关于如何在react.js中构建动态选择框的主要内容,如果未能解决你的问题,请参考以下文章
如何在 react js 中动态生成 javascript 文件?