具有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} />

I do not understand why that second handleChange doesn't work, can anyone explain? I usually use the second way (with the handleChange ('location') ), but it does not work ... What does (e, {value}) mean?

Answer 1

handleChange = (e, { value }) can also be written as handleChange = (e, valueObject) where valueObject is {value: 'YOUR_VALUE_HERE'} .

This is called object deconstructing and you can read more about it here .

In order to get your code working the way that you want it to you will have to modify your handleChange function to be the following:

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

Answer 2

Really good question! Let me try to explain.

In your first function

handleChange = (e, { value }) => {
    this.setState({same:value})
}

your function is accepting e and {value} as function parameter. however your second function is

concise body syntax, where in the "return" is function body. So every expression after => is a function. This is the typical example of Currying

let me explain it by example

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

Above function after Babel compilation becomes

const handleChange = function(field) {
  return ( function(event) {
     return 'something'
   })
}

The second approach creates a closure + currying type of function. You can keep adding => and it will keep returning function. If you try to check the compiled code you could see something similar as above.

Hence In the first function

handleChange = (e, { value })

setState works fine because the e and {value} are the function parameters and has no closure, however in second

handleChange = field => event =>

event is the parameter of inner function in a closure. To read more about it you can go here Currying in JavaScript ES6

Hope this helps!