Блог

Я пытаюсь использовать пример класса из файла stackblitz и преобразовать его в функциональный компонент.

Я не понимаю, как работает ссылка или откуда event берутся и, args которые используются в onTyping функции. Кто-нибудь может объяснить, где они определены и как я бы перевел это в функциональный компонент?

 import { render } from 'react-dom';
import './index.css';
import * as React from 'react';
import { AutoCompleteComponent } from '@syncfusion/ej2-react-dropdowns';
import { SampleBase } from './sample-base';

import * as data from './dataSource.json';
export class Default extends SampleBase {
    constructor() {
        super(...arguments);
        this.temp = 'sportsData';
        // define the array of string
        this.sportsData = data[this.temp];
    }
    onTyping(args) {
console.log(event.target.value);
    }
    render() {
        return (<div id='combodefault' className='control-pane'>
        <div className='control-section'>
        <div className='col-lg-12 control-wrappers'>
            <div id='default'>
            <AutoCompleteComponent id="games" dataSource={this.sportsData} ref={(AutoComplete) => { this.listObj = AutoComplete; }} placeholder="e.g. Basketball" actionBegin={this.onTyping}/>
            </div>
        </div>
        </div>
        
    </div>);
    }
}

render(<Default />, document.getElementById('sample'));
  

все, что находится в конструкторе, необходимо будет перевести в useState:

     this.temp = 'sportsData';
    // define the array of string
    this.sportsData = data[this.temp];
  

становится:

 const[temp, setTemp] = useState('sportsData');
const[sportsData, setSportsData] = useState(data[temp]);
  

setTemp и setSportsData — это функции, которые используются для установки переменных состояния temp и sportsData соответственно. Например, следующий параметр установит значение temp равным ‘NFSSportsData’.

 setTemp('NFLSportsData');
  

Что касается ref , вы можете использовать ссылку useRef .

 const listObj = useRef(null);
  

для метода жизненного цикла компонента componentDidMount можно использовать следующее соглашение.

 useEffect(()=>{
// your code
}, [])
  

пустая скобка [] означает, что код выполняется только один раз, когда компонент монтируется. Если вы хотите, чтобы код прослушивал переменную состояния и выполнялся каждый раз при изменении переменной, вы можете сделать следующее:

 useEffect(()=>{
// your code
}, [sportsData])
  

Приведенный выше код будет выполняться при каждом изменении переменной состояния sportsData.

Я не думаю, что есть способ расширить функциональный компонент, как вы делаете с SampleBase. Глядя на класс SampleBase, он просто запускает функцию в компоненте жизненного цикла componentDidMount . Вы можете сделать что-то вроде следующего:

 rendereComplete() {
    /**custom render complete function */
}
useEffect(()=>{
    setTimeout(() => {
    this.rendereComplete();
},[]);
  

Чтобы связать все вместе, у вас есть что-то вроде следующего:

 import './index.css';
import * as React from 'react';
import { AutoCompleteComponent } from '@syncfusion/ej2-react-dropdowns';
import * as data from './dataSource.json';

export const Default = ()=> {
  const [temp, setTemp] = React.useState('sportsData');
  const [sportsData, setSportsData] = useState(data[this.temp]);
  const listObj = useRef(null);

  const onTyping = (args)=>{
    console.log('arg =', args);
  }
  
  const rendereComplete() {
        /**custom render complete function */
    }
  useEffect(()=>{
        setTimeout(() => {
        rendereComplete();
  },[]);
  return (<div id='combodefault' className='control-pane'>
  <div className='control-section'>
  <div className='col-lg-12 control-wrappers'>
      <div id='default'>
      <AutoCompleteComponent id="games" dataSource={sportsData} ref={(AutoComplete) => { listObj = AutoComplete; }} placeholder="e.g. Basketball" actionBegin={onTyping}/>
      </div>
  </div>
  </div>
  
</div>);
}