Блог

У меня есть функция в одном файле, которая обрабатывает изменения при выпадающем списке изменений. А именно это.

 import React from 'react';
import axios from 'axios';

import Button from '../components/button';
import { getData } from '../utils/debugger';

import RTSButtons from './rtsButtons';
import RTBButtons from './rtsButtons';
import MPCButtons from './rtsButtons';

// Make a separate function for axios call so that you can reuse it
function queryData(dropdownValue) {
  return axios({
    method: 'GET',
    url: `http://xxx/debugger/${dropdownValue}`,
  })
    .then((res) => res.data.map((k) => k['key']['name']))
    .catch((err) => console.error(err));
}

class InputForm extends React.Component {
  // Just use the state property. No need to use constructor
  state = {
    isLoaded: false,
    dropdown: 'RTS',
    value: '',
    data: [],
  };

  // If you use arrow function then you don't have to
  // bind them in the constructor

  handleChange = (event) => {
    this.setState({ value: event.target.value });
  };

  handleDropdown = async (event) => {
    const value = event.target.value;

    try {
      const newData = await queryData(value);
      this.setState({ data: newData, dropdown: value });

      if (newData.length > 0) {
        this.setState({ value: newData[0] });
      }
      console.log('newData = '   JSON.stringify(newData));
    } catch (ex) {
      console.error('Could not get data from axios');
    }

    // button swap
    if (this.state.dropdown === 'RTS') {
      queryData(this.state.dropdown);
      console.log('RTS Buttons');
      return <RTSButtons />;
    } else if (this.state.dropdown === 'RTB') {
      queryData(this.state.dropdown);
      console.log('RTB Buttons');
      return <RTBButtons />;
    } else if (this.state.dropdown === 'MPC') {
      queryData(this.state.dropdown);
      console.log('MPC Buttons');
      return <MPCButtons />;
    } else if (this.state.dropdown === 'MPC_DSP') {
      queryData(this.state.dropdown);
      console.log('MPC_DSP Buttons');
      return <RTSButtons />;
    }
  };

  handleSubmit = (event) => {
    event.preventDefault();
  };

  componentDidMount() {
    queryData(this.state.dropdown)
      .then((data) => {
        this.setState({ data: data });
        if (data amp;amp; data.length > 0) {
          this.setState({ value: data[0] });
        }
      })
      .catch(() => {
        this.setState({ isLoaded: false });
        // Do other stuff here, may be show any error message?
        // Could not get data
      });
  }

  render() {
    return (
      <div className='flex'>
        <form onSubmit={this.handleSubmit} className='flex items-center'>
          <select
            value={this.state.dropdown}
            onChange={this.handleDropdown}
            className='relative w-full bg-white border border-gray-300 rounded-md shadow-sm px-1 py-3 text-center cursor-default focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm mr-5'>
            <option value='RTS'>RTS</option>
            <option value='RTB'>RTB</option>
            <option value='MPC'>MPC</option>
            <option value='MPC_DSP'>MPC_DSP</option>
          </select>

          <select
            value={this.state.value}
            onChange={this.handleChange}
            className='relative w-full bg-white border border-gray-300 rounded-md shadow-sm px-1 py-3 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm mr-5'>
            {this.state.data.map((r) => (
              <option key={r} value={r}>
                {r}
              </option>
            ))}
          </select>

          {console.log('---')}
          {console.log('these will be entered into the getData()')}
          {console.log(`this.state.dropdown = ${this.state.dropdown}`)}
          {console.log(`this.state.value = ${this.state.value}`)}

          <Button onClick={() => getData(this.state.dropdown, this.state.value)} color='green'>
            Generate
          </Button>
        </form>
      </div>
    );
  }
}

export default InputForm;

 

Я хочу иметь возможность использовать то, что возвращается в операторах if здесь

 handleDropdown = async (event) => {
    const value = event.target.value;

    try {
      const newData = await queryData(value);
      this.setState({ data: newData, dropdown: value });

      if (newData.length > 0) {
        this.setState({ value: newData[0] });
      }
      console.log('newData = '   JSON.stringify(newData));
    } catch (ex) {
      console.error('Could not get data from axios');
    }

    // button swap
    if (this.state.dropdown === 'RTS') {
      queryData(this.state.dropdown);
      console.log('RTS Buttons');
      return <RTSButtons />;
    } else if (this.state.dropdown === 'RTB') {
      queryData(this.state.dropdown);
      console.log('RTB Buttons');
      return <RTBButtons />;
    } else if (this.state.dropdown === 'MPC') {
      queryData(this.state.dropdown);
      console.log('MPC Buttons');
      return <MPCButtons />;
    } else if (this.state.dropdown === 'MPC_DSP') {
      queryData(this.state.dropdown);
      console.log('MPC_DSP Buttons');
      return <RTSButtons />;
    }
  };
 

Я хочу передать возвращенный компонент в другой, чтобы отобразить его для пользователя. Я совершенно не понимаю, как это сделать. Поскольку мне не нужно вызывать другую функцию в другом компоненте, мне просто нужно отобразить то, что возвращается из handleDropdown функции.

Как бы я это показал…будет ли это похоже <div>{somefunction}</div> на другой компонент?

вы можете создать службу и поместить эту функцию в свой файл службы

если вы хотите использовать so, вам нужно импортировать этот файл и использовать эту функцию в любом месте любого компонента.

услуги
-commonFunctions.js

в commonFunctions.js

 handleDropdown = async (event) => {}
 

когда вам нужно использовать импорт

 import {handleDropdown} from './commonFunctions'