Javascript 调用函数时按名称传递参数

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

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

当我调用这个函数时，我想传递一些输入参数，但不是全部。比如说,

   handleChange(test = true, event)

但是，这会给出一个错误，即“ReferenceError:test未定义”

这是我的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);

从“React”导入React；
从“道具类型”导入道具类型；
从“@material ui/core/styles”导入{withStyles}”；
从“@material ui/core/TextField”导入TextField；
常量样式=主题=>({
容器：{
显示：“flex”，
flexWrap:“wrap”，
},
表单控制：{
边距：theme.space.unit，
},
});
类MyForm扩展了React.Component{
状态={
姓名：“，
姓名：“
};
handleChange（必需=错误，测试=错误，事件）{
如果（必需==true&&event.target.value.length==0）{
this.setState（{name_msg:“Required”}）；
}否则{
this.setState（{name_msg:“}）；
}
控制台日志（测试）；
this.setState（{name:event.target.value}）；
}
render（）{
返回(
this.handleChange（test=true，e）}
/>
);
}
}
导出默认样式（样式）（MyForm）；

当您调用该函数时，您只需像调用任何其他函数一样正常地调用它。使用默认参数集调用函数没有什么特别之处。但是，有太多的默认参数通常是没有意义的，特别是如果需要经常在第一个参数之后指定一个，因为不管怎样，每次都必须指定第一个“可选”参数的值

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

---

这是不可能做到的。只能省略尾部参数

一种解决方法是，您可以使用

undefined

来触发默认参数（此处有更多详细信息），如下所示：

---

handleChange（未定义，true，event）

我认为这是正确的方法，但我建议在对象上使用以获取默认参数。ie

handleChange（事件，{required=false，test=false}）

。这样你就不用写三元逻辑了。