使用 Reactstrap 从 API 填充下拉列表

Question

我有这个（有点）与 React 一起工作，但不能 quite 计算出语法来应用 Reactstrap 漂亮 ui （我已经删除了一些多余的可读性的东西）。

以下作品（但长得丑）：

export default class CustomModal extends Component {
constructor(props) {
    super(props);
    this.state = {
        data: [],
        activeItem: this.props.activeItem,
    validate: {
        emailState: '',
    },
    };
}



componentDidMount() {
fetch('http://localhost:8000/api/todos/')
     .then(results => results.json())
     .then(data => this.setState({ data: data })
 )}



render() {
    const { toggle, onSave } = this.props;
    const { data } = this.state;
    return (            
        <Modal isOpen={true} toggle={toggle}>
            <ModalHeader toggle={toggle}> Tool Details </ModalHeader>
            <ModalBody>
                <Form>
                    <Col md={6}>
                        <FormGroup>
                            <Label for="campus">Campus</Label>
                                {['title'].map(key => (
                                <select key={key}>
                                    {this.state.data.map(({ [key]: value }) => <option key={value}>{value}</option>)}
                                </select>
                                ))}
                        </FormGroup>

                        <FormGroup>
                        <Label for="workstream">Workstream</Label>
                        <Input
                            type="select"
                            name="workstream"
                            value={this.state.activeItem.workstream}
                            onChange={this.handleChange}
                            required
                            placeholder="Choose workstream">
                            <option default>Select workstream</option>
                            <option>Automation + Analytics</option>
                            <option>Customer Protection</option>
                        </Input>
                    </FormGroup>

这给了我以下信息：

我正在尝试让这个动态下拉菜单的样式与其他下拉菜单一样，但我无法确定语法（我正在边学边学，以防你还没有注意到了，所以放轻松！如果有更好的方法，我也洗耳恭听，但到目前为止我是一个完全的初学者。

非常感谢！

Answer 1

使用与工作流 select 相同的方式，除了使用 .map() 生成选项而不是硬编码。

{['title'].map(key => (
  <Input
    key={key}
    type="select"
    name={key}
    value={this.state.activeItem.title}
    onChange={this.onChange}>
    {this.state.data.map(({ [key]: value }) => <option key={value}>{value}</option>)}
  </Input>
))}

前提是您 this.state.activeItem.title 并且您的 onChange 可以处理工作流和校园 selects。

使用 Reactstrap 从 API 填充下拉列表

Populate a dropdown from an API using Reactstrap

javascript

reactjs

reactstrap