javascript - 使用 Reactstrap 从 API 填充下拉列表

Question

我有这个工作(某种程度上)与React，但不能完全弄清楚将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

使用与工作流选择相同的方式，不同之处在于使用 .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 可以处理工作流和校园选择。