Question

我正在尝试创建一个动态表单，其中下拉列表的选项取决于从上一个下拉列表中选择的内容。

对于上下文，这是一个课程预订表格，房间只能由某些导师预订，具体取决于所选的主题，因此选择＆＃39;地理＆＃39;将用一个地理导师列表填充导师下拉列表。我已经包含了预订表格的代码，这是一种模式。我将选项传递到一个下拉组件，该组件创建一个并从一组对象生成选项。

选择的主题进入redux状态，然后将相关的导师放入变量并传递到下拉组件

但是，第二个下拉框没有填充选项。当我在console.log中时，正确的选项出现在控制台中，但似乎没有传递给下拉列表。

请你告诉我哪里出错了。

  import _ from 'underscore';
  import React from 'react';
  import {render} from "react-dom";
  import Modal from 'react-responsive-modal';
  var {connect} = require('react-redux');
  var actions = require('actions');
  import Base from 'Base'
  import TextInput from 'TextInput';
  import Dropdown from 'Dropdown';

  class RoomBookingForm extends Base {
    constructor(props) {
    super(props);
  }

      onCloseModal = () => {
      this.props.onClose();
    };

    render() {
      //gets the list of tutors
      let tutorOpts = _.where(this.props.tutors, {subject: this.props.subjectSelected})
      return (
        <Modal open={this.props.open} onClose={this.onCloseModal} little>
            <div className="modal-header-left">
              <h5>Create New Class </h5>
            </div>
            <div className="modal-content-container">
              <form>
                <TextInput type="text" name="name" labelText="Class Name"/>
                <Dropdown model="subjectSelected" labelText="subject" options={this.props.subjects}></Dropdown>
                <Dropdown model="tutorSelected" labelText="tutors" options={tutorOpts}></Dropdown> //tutors passed in here
                <button onClick={this.onCloseModal}>Save</button>
              </form>
            </div>
        </Modal>
      )
    }
  };

  const mapDispatchToProps = (dispatch) => {
  }

  const mapStateToProps = (state, ownProps) => {
    return {
      tutors: state.tutors,
      subjects: state.subjects,
      subjectSelected: state.form.subjectSelected
    }
  }
   export default connect(mapStateToProps, mapDispatchToProps)(RoomBookingForm);

试图在反应中创建动态表单，数据不会传递到组件道具中

0 个答案: