Question

对这个问题感到抱歉，我很反应。

我有一个组件＆＃34; QuickLaunch＆＃34;含有2：基于反应选择的组分＆＃34; MySelect＆＃34;和自定义数据表组件（Datatable）。

Quicklaunch中的渲染功能如下所示：

render() {
    return (...
        <MySelect item="lists" searchField="name" condition="list_type_id=1" multi={true} name="select-list"/>
        ...
        <Datatable options={{...}}>
...)}

我需要的是在react-select组件中添加一个项目（就像我选择了react-select组件中的项目一样）但是当我点击表格中的一行时。我知道如何使用自定义组件执行此操作，但由于我不想修改包的来源，因此无法使用react-select进行此操作。这可能吗？这是MySelect来源：

import React from 'react'
//import PropTypes from 'prop-types';
import Msg from '../i18n/Msg'
import PropTypes from 'prop-types';

//https://jedwatson.github.io/react-select/
import Select from 'react-select';


import mtpSettings from '../../config/mtp4.json'
import { setRequestHeaders, formsForOptions } from '../../lib/mtp.js'




export default class MySelect extends React.Component {

    constructor(props) {
        super(props)
        this.props = props
        this.state = {value: ''};
    }

    // componentDidMount = () => {
    //  this.setState({
    //      value: '',
    //  })
    // }

    getOptions = (input) => {
        if (!input) {
            return Promise.resolve({ options: [] });
        }
        let fetchData = {
            "headers": setRequestHeaders(),
            "method": "GET"
        }

      //let url = mtpSettings.mtp4Config.apiBaseUrl + 'lists' + "?limit=50&" + "name" + "=%" + input + "%" 
      let url = mtpSettings.mtp4Config.apiBaseUrl + this.props.item + "?limit=50&" + 
      this.props.searchField + "=%" + input + "%&" +  this.props.condition
      return fetch(url, fetchData)
        .then((response) => {
            // console.log(response.json())
            return response.json()
        })
        .then((items) => {
            let options = formsForOptions(items, "id_list", "name")
            return { options: options }
        })
    }

    onChange = (value) => {
        this.setState({
            value: value,
        })
    }

    render() {
        //const AsyncComponent = this.state.creatable ? Select.AsyncCreatable : Select.Async;
        /*<AsyncComponent multi={this.state.multi} value={this.state.value} 
        onChange={this.onChange} onValueClick={this.gotoUser} valueKey="id" labelKey="login" 
        loadOptions={this.getUsers} backspaceRemoves={this.state.backspaceRemoves} />
        */  

        return (
            <div>
            <Select.Async
              name={this.props.name} 
              autoload={true} 
              value={this.state.value} 
              loadOptions={this.getOptions}
              onChange={this.onChange} 
              backspaceRemoves={true}
              multi={this.props.multi}
              id={this.props.id}
            />
            </div>
        )
    }
}

非常感谢！

Answer 1

您可以在QuickLaunch组件中添加列表并进入状态，然后在点击行后获取该行数据并相应地更新列表。

Answer 2

我解决了，但我不知道这是否正确：

在QuickLaunch中，我添加了一个参考我的选择： render() { return ( ... <MySelect ref="selectList" ...
然后在MySelect组件中，我添加了一个方法（使用箭头函数来获取正确的“this”），例如addOption，如下所示： addOption = (option) => { this.setState({ value: option }) }
回到我的主要组件“QuickLaunch”中我只需要添加一个事件（例如dropzone的onDrop）来执行该方法 onDrop(files) { ... var selectList = this.refs.selectList selectList.addOption({label: 'aLabel', value: 'aValue'}) ... }

如果有帮助，请告诉我。

更新来自另一个组件的组件

2 个答案: