javascript - 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}
      />

为什么我必须使用“数据”参数来获取 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 中，有几种方法可以获取所有参数，具体取决于您的环境。

在 es6 之前的 javascript(“严格模式”之前，这是 es6 模块默认的模式)中有一个名为“arguments”的动态变量。您可以在此处查看对它的引用:mdn

在较新的 es6 风格环境中，您可以使用所谓的“剩余参数语法”来获得类似的东西，这将是一个参数数组。 mdn

一般来说，该信息应该在您正在使用的库或 React 组件的文档中。

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

someFn("hey", "there");