在React原生UI中填充一个数据,并在下拉列表中选择时填充数组值,可以通过以下步骤实现:
下面是一个示例代码:
import React, { Component } from 'react';
class Dropdown extends Component {
constructor(props) {
super(props);
this.state = {
options: [], // 存储下拉列表选项的数组
selectedValue: '' // 存储用户选择的值
};
}
componentDidMount() {
// 异步请求获取数据,假设返回一个包含选项的数组
fetch('https://example.com/api/options')
.then(response => response.json())
.then(data => {
this.setState({ options: data });
})
.catch(error => {
console.error('Error:', error);
});
}
handleSelectChange = (event) => {
const selectedValue = event.target.value;
this.setState({ selectedValue });
}
render() {
const { options, selectedValue } = this.state;
return (
<div>
<select value={selectedValue} onChange={this.handleSelectChange}>
<option value="">请选择</option>
{options.map(option => (
<option key={option.id} value={option.value}>{option.label}</option>
))}
</select>
</div>
);
}
}
export default Dropdown;
在上述示例中,Dropdown组件在componentDidMount方法中使用fetch函数发送异步请求获取数据,并将返回的数据存储到组件的state中的options数组中。在render方法中,使用map函数遍历options数组,生成下拉列表的选项。在下拉列表的onChange事件中,调用handleSelectChange方法获取用户选择的值,并更新组件的state中的selectedValue字段。
这样,当用户在下拉列表中选择一个选项时,selectedValue字段会更新,可以通过访问this.state.selectedValue来获取用户选择的值。
领取专属 10元无门槛券
手把手带您无忧上云