Question

handleChange函数具有带有默认值的输入参数。

   handleChange(required = false, test = false, event)

当我调用此函数时，我想传递一些输入参数，但不是全部。例如，

   handleChange(test = true, event)

但是，这会出现错误，提示“ ReferenceError：未定义测试。”

这是我的App.js文件：

  import React from 'react';
  import PropTypes from 'prop-types';
  import { withStyles } from '@material-ui/core/styles';
  import TextField from '@material-ui/core/TextField';

  const styles = theme => ({
    container: {
      display: 'flex',
      flexWrap: 'wrap',
    },
    formControl: {
      margin: theme.spacing.unit,
    },
  });

  class MyForm extends React.Component {
    state = {
      name: "",
      name_msg: ""
    };

    handleChange(required = false, test = false, event) {

      if (required === true &&  event.target.value.length === 0) {
        this.setState({ name_msg: "Required" });
      }else{
        this.setState({ name_msg: "" });
      }

      console.log(test);

      this.setState({ name: event.target.value });
    }

    render() {
      return (
          <TextField
            label="Name"
            id="name"
            helperText={this.state.name_msg}
            value={this.state.name}
            onChange={(e) => this.handleChange(test=true,e)}
          />
      );
    }
  }


  export default withStyles(styles)(MyForm);

Answer 1

调用该函数时，通常只需像调用其他任何函数一样调用它即可。调用具有默认参数集的函数没有什么特别的。但是，通常没有太多的默认参数，特别是如果您需要经常在第一个参数之后指定一个参数，因为那样的话，您无论如何每次都要指定第一个“可选”参数的值。

onChange={(e) => this.handleChange(false, true, e)}

非默认参数应始终排在最前面，这样您就不必指定每个默认参数：

handleChange(event, required = false, test = false)

然后您可以拨打以下任何电话

：

handleChange(event) // required=false, test=false
handleChange(event, true) // required=true, test=false
handleChange(event, true, true) // required=true, test=true
...

也许您想创建一个使用options对象的回调，并根据默认值设置一些值：

handleChange(event, options = {}) {
  const required = options.required ? options.required : false;
  const test = options.test ? options.test : false;

  ...
}

然后您将其命名为：

handleChange(event) // required=false, test=false
handleChange(event, { required: true }) // required=true, test=false
handleChange(event, { test: true }) // required=false, test=true
handleChange(event, { required: true, test: true }) // required=true, test=true

Answer 2

无法完成。只能忽略尾随参数。

一种解决方法是，您可以使用undefined来触发默认参数（此SO thread中的更多详细信息），如下所示：

handleChange(undefined, true, event)

调用函数时按名称反应传递参数

2 个答案: