ReactJS: как я могу узнать, какие параметры автоматически передаются от компонента при запуске onChange?

Question

Вероятно, это очень новый вопрос, но я не могу понять, как узнать, какие параметры передаются в функцию. Позвольте мне показать вам, что я имею в виду:

В моем конструкторе есть следующий код:

this.handleFormInput = this.handleFormInput.bind(this);

А потом:

  handleFormInput(event) {
    console.log('event' + event.target.name);
    this.setState({
      [event.target.name]: event.target.value
    })
  }

И, наконец, форма:

    <Form>
      <Form.Group>
        <Form.Field style={{width: '90%'}}>
          <input placeholder='Section title'
            id={section.id}
            name='title'
            value={section.title}
            onChange={this.handleInput}
          />
        </Form.Field>
      </Form.Group>
    </Form>

Пока все хорошо: параметр события передается автоматически, и я могу достичь его, добавив его в качестве параметра в мою функцию.

Теперь у меня есть раскрывающийся компонент. В конструкторе у меня есть:

this.handleDropDownInput = this.handleDropDownInput.bind(this);

Функция:

  handleDropDownInput(event, data) {
    console.log('value ' + data.value);
    this.setState({
      [data.name]: data.value
    })
  }

Тогда выпадающий список semantic-ui:

      <Dropdown
        fluid
        placeholder='Language'
        search
        selection
        options={languages}
        defaultValue='gb'
        name='language'
        onChange={this.handleDropDownInput}
      />

Почему я должен использовать параметр 'data', чтобы получить значение компонента Dropdown? Почему я не могу использовать только событие? Как узнать, какие параметры передаются автоматически при срабатывании onChange?

Уместно ли иметь разные функции для разных компонентов ввода (выпадающий список, поля формы и т. Д.)? Можно и нужно ли сделать одну функцию для управления всеми действиями пользователя?

Например, я придумал эту функцию для обработки полей выпадающего меню и формы в событиях onChange:

  handleInput(event, data) {
    if (data !== undefined) {
      console.log('value ' + data.value);
      this.setState({
        [data.name]: data.value
      })
    } else {
      console.log('event ' + event.target.name);
      this.setState({
        [event.target.name]: event.target.value

      })
    }

Это хорошая или плохая практика? Спасибо.

Answer 1

В javascript есть несколько способов получить все аргументы, в зависимости от вашей среды.

В javascript pre-es6 (до "строгого режима", который по умолчанию используются модулями es6) существовала динамическая переменная, называемая "arguments". Ссылку на него можно посмотреть здесь: mdn

В более новых средах в стиле es6 вы можете использовать то, что называется "синтаксисом параметров покоя", чтобы получить нечто подобное, которое будет массивом аргументов. MDN

Как правило, эта информация должна быть в документации по используемому вами компоненту библиотеки или реагирования.

function someFn(...args) {
  console.log(args)
}

someFn("hey", "there");