const languageOptions = [
{ key: '0', text: 'English', value: 'english' },
{ key: '1', text: 'Portuguese', value: 'portuguese' },
]
handleChange = field => (e, { value }) => {
this.setState({[field]:value})
}
//what is difference between this functions?
handleChange = field => event => {
this.setState({[field]:event.target.value})
}
<Input onChange={this.handleChange('language')} options={languageOptions} value={this.state.language} />
我不明白为什么第二个handleChange不起作用,有人可以解释吗?我通常使用第二种方法(与handleChange ('location')
一起使用,但是它不起作用... (e, {value})
是什么意思?
答案 0 :(得分:1)
handleChange = (e, { value })
也可以写成handleChange = (e, valueObject)
,其中valueObject是{value: 'YOUR_VALUE_HERE'}
。
这称为对象解构,您可以进一步了解here。
为了使您的代码按您希望的方式工作,您必须将handleChange
函数修改为以下内容:
handleChange = field => (event, { value }) => {
this.setState({[field]: value})
}
答案 1 :(得分:1)
真的很好的问题!让我尝试解释一下。
在您的第一个功能中
handleChange = (e, { value }) => {
this.setState({same:value})
}
您的函数正在接受e
和{value}
作为函数参数。但是您的第二个功能是
简洁的主体语法,其中“返回”是函数主体。因此,=>之后的每个表达式都是一个函数。这是
的典型示例Currying
让我通过示例进行解释
handleChange = field => event => {
this.setState({[field]:event.target.value})
}
Babel编译后的上述功能变为
const handleChange = function(field) {
return ( function(event) {
return 'something'
})
}
第二种方法创建closure
+ currying
类型的函数。您可以继续添加=>
,它将继续返回函数。如果您尝试检查已编译的代码,则可能会看到类似上面的内容。
因此在第一个功能中
handleChange = (e, { value })
setState
可以正常工作,因为e
和{value}
是函数参数,没有闭包,但是在第二个
handleChange = field => event =>
event
是闭包中内部函数的参数。要了解更多信息,请点击Currying in JavaScript ES6
希望这会有所帮助!