javascript - Confusion about passing parameters in react

Question

When I looked at the example given by draft-js, I got confused.

I usually pass parameters directly

xxx={(ev, arg1, arg2,……) => {this.xxx(ev, arg1, arg2,……)}

Official Quick Start Example

class MyEditor extends React.Component {
  constructor(props) {
    super(props);
    this.state = {editorState: EditorState.createEmpty()};
    this.onChange = (editorState) => this.setState({editorState});
  }
  render() {
    return (
        <Editor editorState={this.state.editorState} onChange={this.onChange} />
    );
  }
}

Want to know how the editorState parameter is passed to the onChange function?
I tried

this.onChange = (editorState) => {
    var length = arguments.length;
    console.log('change');
    for (var i = 0; i < length; i++) {
        if (arguments[i] == editorState) {
            console.log(i);
        }
    }
    this.setState({editorState})
};

There is no editorState parameter in arguments. And if there is direct output

this.onChange = (editorState) => {
    console.log(editorState);
    this.setState({editorState})
};

why?

Answer 1

The arrow function does not create a new function scope, so a new this will not be constructed and arguments cannot be used.

So, the test arguments written by the questioner is not actually the "arguments" you want

Reference Chinese:
http://es6.ruanyifeng.com/#do...
There are several points to note when using arrow functions.

(1) The this object in the function body is the object where it is defined, not the object where it is used.
(2) cannot be used as a constructor, that is to say, the new command cannot be used, otherwise an error will be thrown.
(3) The arguments object cannot be used, as the object does not exist in the function body. If you want to use it, you can use Rest parameters instead.
(4) The yield command cannot be used, so the arrow function cannot be used as a Generator function.

demo online: http://jsbin.com/yuforakeso/e...
demo:

function foo () {
  const bar = function bar (arg1) {
    console.log(`arguments:`);
    console.log(arguments);
    console.log(`bar arg1:${arg1}`)
  }
  
  bar('barArg');
  
  const fooArguments = arguments;
  
  const baz = (arg2) => {
    console.log()
    console.log(`arguments:`);
    console.log(arguments);
    if(fooArguments === arguments) {
      console.log('Arrow Functions not have arguments');
    }
    console.log(`baz arg2:${arg2}`)
  }
  
  baz('bazArg');
}

foo()

Answer 2

_update(editorState: EditorState): void {
    this._latestEditorState = editorState;
    this.props.onChange(editorState);
}

This is a source code of the Editor component. It is this component that returns the parameters you want.

Answer 3

Your usual way of writing is to write it in the tag, that is, use js syntax to explain it within {}
The quick example is the normal way of writing
=>The arguments of the function constructed by symbols are different from the arguments of the function constructed by function. In the same way, you can directly output arguments to see what they are

Answer 4

I summarized it myself.

Modify the function of theone1006

function foo () {
  const bar = function bar (arg1) {
    console.log(`arguments:`);
    console.log(arguments);
    console.log(`bar arg1:${arg1}`)
  }
  
  bar('barArg');
  
  const fooArguments = arguments;
  
  const baz = (arg2) => {
    console.log()
    console.log(`arguments:`);
    console.log(arguments);
    if(fooArguments === arguments) {
      console.log('Arrow Functions not have arguments');
    }
    console.log(`baz arg2:${arg2}`)
  }
  
  baz('bazArg');
}

foo('test');

You can find that the arguments of baz are the arguments of foo.
If the baz function is proposed separately

  const baz = (arg2) => {
    console.log()
    console.log(`arguments:`);
    console.log(arguments);
    console.log(`baz arg2:${arg2}`)
  }
  
  baz('bazArg');

will promptarguments is not defined.

Then I tried it

    constructor(props) {
        super(props);
        console.log(arguments);
        this.handleClick = (a, b, c) => {
            console.log(a);
            console.log(b);
            console.log(c);
            console.log('..............');
            console.log(arguments);
        }        
    }
    render() {
        return (
            <p>
                <p onClick={(event) => this.handleClick(event)}>111</p>
            </p>
        );
    }

It can be seen that the arguments of handleClick are the arguments of constructor. Parameters a, b, c and arguments are inconsistent.

Finally, based on chhu1’s answer, I know where the parameters come from.