首选的ES6箭头函数语法格式

Question

I have an onChange event handler that is shaping up like this:

(e) => (value => this.setState(prevState => ({
        form: {
            ...prevState.form,
            email: value
        }
    })))(e.target.value)

I minified it down to that from this

(e) => {
    let value = e.target.value;
    this.setState((prevState) => ({
        form: {
            ...prevState.form,
            password: value
        }
    }))
}

Neither of these are very appealing. I like the first one b/c it is 3 less lines of code but it also has a ton of parenthesis. Is there another variation I might be missing that can clean this up further? The use of the spread operator adds an extra paren, could this be removed somehow?

Thanks

Answer 1

You could destructure out the value from the event and just do the setState as the only statement.

({ target: { value } }) => this.setState(prevState => ({
  form: {
    ...prevState.form,
    password: value
  }
}));

Answer 2

Personally I would use this:

e => {
    let value = e.target.value;
    this.setState({
        form: {
            ...this.state.form,
            password: value
        }
    });
}

Answer 3

Just another idea for you :)

event => {
   const password = event.target.value;
   const form = { ...this.state.form, password };
   this.setState({ form });
}