Reactjs 带下拉菜单的蚂蚁表

我在表格内的表格内有一个3选择。我正在调用api来填充componentdidmount上的这一选择。下一个将根据第一个中选择的值填充。最后一个将根据在第二个中选择的值填充。我怎样才能做到这一点。Im使用ANT design中的可编辑表格组件

我正在使用axios作为api

apiSelect(){
    axios
    .get(`http://10.42.0.108:8000/asset_request/required_type_dropdown?id=${this.columns.requesttype}`)
    .then(response=>response.data)
    .then(data=>{this.setState({request_type:data.request_type_list})
                this.setState({loading:false});
              })
    .catch(error => {console.log(error);})
  }

这是完整的代码。我修改了原始的ant文件。但我仍然只是reactjs上的一个傻瓜，所以还没有掌握全部窍门。请帮帮我

    const required_type = {"name":"select"};
    const asset_type = {"name":"select"};
    const EditableContext = React.createContext();
    const { Option } = Select;
    const EditableRow = ({ form, index, ...props }) => (
      <EditableContext.Provider value={form}>
        <tr {...props} />
      </EditableContext.Provider>
    );

    const EditableFormRow = Form.create()(EditableRow);

    class EditableCell extends React.Component {
      state = {
        editing: false,
      };

      toggleEdit = () => {
        const editing = !this.state.editing;
        this.setState({ editing }, () => {
          if (editing) {
            this.input.focus();
          }
        });
      };

      save = e => {
        const { record, handleSave } = this.props;
        this.form.validateFields((error, values) => {
          if (error && error[e.currentTarget.id]) {
            return;
          }
          this.toggleEdit();
          handleSave({ ...record, ...values });
        });
      };

      renderCell = form => {
        this.form = form;
        const { children, dataIndex, record, title } = this.props;
        const { editing } = this.state;
        return editing ? (
          <Form.Item style={{ margin: 0 }}>
            {form.getFieldDecorator(dataIndex, {
              rules: [
                {
                  required: true,
                  message: `${title} is required`,
                },
              ],
              initialValue: record[dataIndex],
            })(<Input ref={node => (this.input = node)} onPressEnter={this.save} onBlur={this.save} />)}
          </Form.Item>
        ) : (
          <div
            className="editable-cell-value-wrap"
            style={{ paddingRight: 24 }}
            onClick={this.toggleEdit}
          >
            {children}
          </div>
        );
      };

      render() {
        const {
          editable,
          dataIndex,
          title,
          record,
          index,
          handleSave,
          children,
          ...restProps
        } = this.props;
        return (
          <td {...restProps}>
            {editable ? (
              <EditableContext.Consumer>{this.renderCell}</EditableContext.Consumer>
            ) : (
              children
            )}
          </td>
        );
      }
    }

    export default class EditableTable extends React.Component {
      constructor(props) {
        super(props);

        this.columns = [
          {
            title: 'Request Type',
            dataIndex: 'requesttype',
            align:'center',
            //width: '5%',
            render: (select, record) =>
              this.state.dataSource.length >= 1 ? (
                            <Select defaultValue='Select' name='requestType'>
                                {this.props.requesttypedrop.map(person => (
                                    <Option value={person.name} label={person.name} key={person.name}>
                                      {person.name}
                                    </Option>
                                 ))}
                            </Select>
              ) : null,
          },
          {
            title: 'Required Type',
            dataIndex: 'requiredtype',
            align:'center',
            //width: '5%',
            render: (select, record) =>
              this.state.dataSource.length >= 1 ? (
                            <Select defaultValue='Select' name='requiredType'>
                            {/* {required_type.map(person => (
                                    <Option value={person.name} label={person.name} key={person.name}>
                                      {person.name}
                                    </Option>
                                 ))} */}
                            </Select>
              ) : null,
          },
          {
            title: 'Asset Type',
            dataIndex: 'assettype',
            align:'center',
            //width: '5%',
            render: (select, record) =>
              this.state.dataSource.length >= 1 ? (
                            <Select defaultValue='Select' name='assetType'>
                            {/* {asset_type.map(person => (
                                    <Option value={person.name} label={person.name} key={person.name}>
                                      {person.name}
                                    </Option>
                                 ))} */}
                            </Select>
              ) : null,
          },
          {
            title: 'Operation',
            dataIndex: 'operation',
            align:'center',
            render: (text, record) =>
              this.state.dataSource.length >= 1 ? (
                <Popconfirm title="Sure to delete?" onConfirm={() => this.handleDelete(record.key)}>
                  <a href="javascript:;"><Icon style={{color:'#282c34'}} type="delete" theme="filled" /></a>
                </Popconfirm>
              ) : null,
          },
        ];

        this.state = {
          dataSource: [
            {
              key: '0',

            }

          ],
          count: 1,
        };
      }


      handleDelete = key => {
        const dataSource = [...this.state.dataSource];
        this.setState({ dataSource: dataSource.filter(item => item.key !== key) });
      };

      handleAdd = () => {
        const { count, dataSource } = this.state;
        const newData = {
          key: count,

        };
        this.setState({
          dataSource: [...dataSource, newData],
          count: count + 1,
        });
      };

      handleSave = row => {
        const newData = [...this.state.dataSource];
        const index = newData.findIndex(item => row.key === item.key);
        const item = newData[index];
        newData.splice(index, 1, {
          ...item,
          ...row,
        });
        this.setState({ dataSource: newData });
      };

      render() {
        const { dataSource } = this.state;
        const components = {
          body: {
            row: EditableFormRow,
            cell: EditableCell,
          },
        };
        const columns = this.columns.map(col => {
          if (!col.editable) {
            return col;
          }
          return {
            ...col,
            onCell: record => ({
              record,
              editable: col.editable,
              dataIndex: col.dataIndex,
              title: col.title,
              handleSave: this.handleSave,
            }),
          };
        });
        return (
          <div>
            <Table
              components={components}
              rowClassName={() => 'editable-row'}
              bordered
              dataSource={dataSource}
              columns={columns}
              style={{overflowX:"scroll"}}
            />
            <Button onClick={this.handleAdd} style={{ marginTop: 16,float: 'right' }}>
              Add a row
            </Button>
          </div>
        );
      }
    }

const required_type={“name”：“select”}；
const asset_type={“name”：“select”}；
const EditableContext=React.createContext（）；
const{Option}=Select；
const EditableRow=（{form，index，…props}）=>(
);
const EditableFormRow=Form.create（）（EditableRow）；
类EditableCell扩展了React.Component{
状态={
编辑：错，
};
toggleEdit=（）=>{
常量编辑=！this.state.editing；
this.setState（{editing}，（）=>{
如果（编辑）{
this.input.focus（）；
}
});
};
保存=e=>{
const{record，handleSave}=this.props；
this.form.validateFields（（错误，值）=>{
if（错误和错误[e.currentTarget.id]）{
返回；
}
this.toggleEdit（）；
handleSave（{…记录，…值}）；
});
};
renderCell=form=>{
this.form=形式；
const{children，dataIndex，record，title}=this.props；
const{editing}=this.state；
返回编辑(
{form.getFieldDecorator（数据索引{
规则：[
{
要求：正确，
消息：“${title}是必需的”，
},
],
initialValue:记录[dataIndex]，
})（（this.input=node）}onPressEnter={this.save}onBlur={this.save}/>）}
) : (
{儿童}
);
};
render（）{
常数{
可编辑，
数据索引，
标题
记录，
指数
handleSave，
儿童
…其他道具
}=这是道具；
返回(
{可编辑(
{this.renderCell}
) : (
儿童
)}
);
}
}
导出默认类EditableTable扩展React.Component{
建造师（道具）{
超级（道具）；
此值为。列=[
{
标题：“请求类型”，
dataIndex:'requesttype'，
对齐：'居中'，
//宽度：“5%”，
渲染：（选择，录制）=>
this.state.dataSource.length>=1(
{this.props.requesttypedrop.map（person=>(
{person.name}
))}
)：null，
},
{
标题：“必需类型”，
数据索引：“requiredtype”，
对齐：'居中'，
//宽度：“5%”，
渲染：（选择，录制）=>
this.state.dataSource.length>=1(
{/*{required_type.map（person=>(
{person.name}
))} */}
)：null，
},
{
标题：“资产类型”，
数据索引：“资产类型”，
对齐：'居中'，
//宽度：“5%”，
渲染：（选择，录制）=>
this.state.dataSource.length>=1(
{/*{asset_type.map（person=>(
{person.name}
))} */}
)：null，
},
{
标题:"行动",，
dataIndex:'操作'，
对齐：'居中'，
呈现：（文本、记录）=>
this.state.dataSource.length>=1(
this.handleDelete（record.key）}>
)：null，
},
];
此.state={
数据源：[
{
键：“0”，
}
],
计数：1，
};
}
handleDelete=键=>{
const dataSource=[…this.state.dataSource]；
this.setState（{dataSource:dataSource.filter（item=>item.key！==key）}）；
};
handleAdd=（）=>{
const{count，dataSource}=this.state；
常数newData={
关键：计数，
};
这是我的国家({
数据源：[……数据源，新数据]，
计数：计数+1，
});
};
handleSave=行=>{
const newData=[…this.state.dataSource]；
const index=newData.findIndex（item=>row.key==item.key）；
常量项=新数据[索引]；
新数据。拼接（索引，1{
…项目，
一行
});
this.setState（{dataSource:newData}）；
};
render（）{
const{dataSource}=this.state；
常数分量={
正文：{
行：EditableFormRow，
单元格：可编辑单元格，
},
};
const columns=this.columns.map（col=>{
如果（！列可编辑）{
返回列；
}
返回{
…上校，
onCell:record=>({
记录
this.state = {
      select1: true
      select2: true
      select3: true
    };

 <Select disabled={this.state.select1}></Select>

this.setState({request_type:data.request_type_list
                loading:false
                select1:false
             });