从反应中的另一个组件更新组件

Question

抱歉这个问题，我是 react 新手。

我有一个组件“QuickLaunch”，其中包含 2 个：一个基于 react-select 的组件“MySelect”和一个自定义数据表组件 (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 中，我向我的选择添加了一个参考，如下所示： 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'}) ... }

如果这对任何人有帮助，请告诉我。

Answer 2

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