具有React和Semantic Ui的Java語言中的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不起作用，有人可以解釋嗎？ 我通常使用第二種方法（使用handleChange ('location') ），但是它不起作用... (e, {value})是什么意思？

Answer 1

handleChange = (e, { value })也可以寫成handleChange = (e, valueObject) ，其中valueObject是{value: 'YOUR_VALUE_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是閉包中內部函數的參數。 要了解更多有關它的信息，請轉到此處。

希望這可以幫助！