ReactJS:当触发 onChange 时,我如何知道从组件自动传递了哪些参数?

ReactJS: how can I know what parameters are passed automatically from a component when onChange is triggered?

这可能是一个非常新手的问题,但我不知道如何知道将哪些参数传递给函数。让我告诉你我的意思:

我的构造函数中有以下代码:

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

      })
    }

这是好事还是坏事?谢谢。

在 javascript 中,您可以通过多种方式获取所有参数,具体取决于您的环境。

在 pre-es6 javascript(pre "strict mode," 这是 es6 模块默认的)有一个动态变量叫做 "arguments." 你可以在这里看到它的引用:mdn

在较新的 es6 风格环境中,您可以使用所谓的 "rest parameter syntax" 来获得类似的东西,这将是一个参数数组。 mdn

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

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

someFn("hey", "there");