使用React和Semantic Ui在Javascript中处理HandleChange

Question

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 ('location')），但它不起作用...... (e, {value})是什么意思？

Answer 1

handleChange = (e, { value })也可以写成handleChange = (e, valueObject)，其中valueObject是{value: 'YOUR_VALUE_HERE'}。

这被称为对象解构，你可以阅读更多关于它的here。

为了使您的代码按照您希望的方式工作，您必须将handleChange函数修改为以下内容：

handleChange = field => (event, { value }) => {
   this.setState({[field]: value})
}

Answer 2

真好问题！让我试着解释一下。

在你的第一个功能

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

希望这可以帮助！