反応中の他の成分からの更新成分

Question

ごめんねごめん、私は反応が早いです。

私は、反応選択ベースのコンポーネント "MySelect"とカスタムデータテーブルコンポーネント（Datatable）の2つを含む1つのコンポーネント "QuickLaunch"を持っています。

QuickLaunchをにおけるレンダリング機能は次のようになります。私は必要なもの

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

は（私はそれに反応選択をコンポーネント内のアイテムを選択した場合、私は希望のように）反応する選択コンポーネントに項目を追加することですしかし、私はテーブルの行をクリックします。私はカスタムコンポーネントでこれを行う方法を知っていますが、私はパッケージのソースを変更したくないので、それをリアクションセレクトで正確に行うことはできません。これは可能ですか？ここ は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とコンポーネントで、 addOption = (option) => { this.setState({ value: option }) }

• そして、戻って私の主成分での「Q：私は、例えばaddOptionため、このような（正しい「これ」を取得するには、矢印の機能を使用して）メソッドを追加しましたuickLaunchは、」私はちょうどそれが誰を助けた場合、私に教えてください onDrop(files) { ... var selectList = this.refs.selectList selectList.addOption({label: 'aLabel', value: 'aValue'}) ... }

方法を実行しますイベント（ドロップゾーンのインスタンスのonDrop）を追加する必要がありました。