javascript - Kekeliruan tentang menghantar parameter dalam tindak balas

Question

Semasa melihat contoh yang diberikan oleh draft-js, saya menjadi keliru.

Saya biasanya memindahkan parameter secara terus

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

Contoh permulaan pantas rasmi

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} />
    );
  }
}

Ingin tahu bagaimana parameter editorState dihantar ke fungsi onChange?
Saya dah cuba

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})
};

Tiada parameter editorState dalam argumen. Dan jika ada keluaran langsung

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

Kenapa?

Answer 1

Fungsi anak panah tidak mencipta skop fungsi baharu, jadi fungsi baharu ini tidak akan dibina dan hujah tidak boleh digunakan.

Jadi, ujian arguments yang ditulis oleh penanya sebenarnya bukanlah "hujah" yang anda mahukan

Rujukan Bahasa Cina:
http://es6.ruanyifeng.com/#do...
Terdapat beberapa perkara yang perlu diberi perhatian apabila menggunakan fungsi anak panah.

(1) Objek ini dalam badan fungsi ialah objek di mana ia ditakrifkan, bukan objek di mana ia digunakan.
(2) tidak boleh digunakan sebagai pembina, iaitu, arahan baru tidak boleh digunakan, jika tidak, ralat akan dilemparkan.
(3) Objek hujah tidak boleh digunakan, kerana objek itu tidak wujud dalam badan fungsi. Jika anda ingin menggunakannya, anda boleh menggunakan parameter Rehat.
(4) Arahan hasil tidak boleh digunakan, jadi fungsi anak panah tidak boleh digunakan sebagai fungsi Penjana.

demo dalam talian: 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);
}

Ini ialah kod sumber komponen Editor Komponen inilah yang mengembalikan parameter yang anda inginkan.

Answer 3

Cara penulisan biasa anda ialah menulisnya dalam teg, iaitu, gunakan sintaks js untuk menerangkannya dalam {}
Contoh pantas ialah cara penulisan biasa
=>Argumen bagi fungsi yang dibina oleh simbol adalah berbeza daripada argumen fungsi yang dibina oleh fungsi yang sama, anda boleh terus mengeluarkan argumen untuk melihat apakah ia

Answer 4

Saya ringkaskan sendiri.

Ubah suai fungsi 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');

Anda boleh mendapati bahawa hujah-hujah baz adalah hujah-hujah foo.
Jika fungsi baz dicadangkan secara berasingan

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

akan menggesaarguments is not defined.

Kemudian saya mencubanya

    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>
        );
    }

Dapat dilihat bahawa argumen handleClick adalah argumen pembina. Parameter a, b, c dan hujah adalah tidak konsisten.

Akhirnya, berdasarkan jawapan chhu1, saya tahu dari mana datangnya parameter.