Question

我有两个js文件。 1.Talker.js 2.Button.js

Talker.js

    import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from './Button';

class Talker extends React.Component {
  talk() {
    let speech = '';
    for (let i = 0; i < 10000; i++) {
      speech += 'blah ';
    }
    alert(speech);
  }

  render() {
    return <Button talk={this.talk} />;
  }
}

ReactDOM.render(
  <Talker />,
  document.getElementById('app')
);

Button.js

import React from 'react';

export class Button extends React.Component {
  render() {
    return (
      <button>
        Click me!
      </button>
    );
  }
}

我想将'talk'方法传递给'Button'。但是当我更改代码时

return <Button talk={this.talk} />;

在Talker课程中

 return <Button talk={talk} />;

它也工作正常。这里使用'this'这个关键词是什么？是否有必要？当我使用第二段代码时会发生什么不同？

Answer 1

原因Button永远不会调用talk。如果你接受它作为按钮属性，例如：

 export class Button extends React.Component { 
   render() { 
      return <button onClick={this.props.talk} >Click me!</button>;
   }
 }

然后传递talk将失败，因为talk未定义且无法调用。所以不，它不正常工作。使用this来引用上下文是强制性的。

Answer 2

您没有使用public class MyClass implements Parcelable { private transient JSONObject json; public static final String KEY = "my_key"; public static final String VALUE = "my_value"; public MyClass(){ json = new JSONObject(); } public MyClass(String json){ try { if (!TextUtils.isEmpty(json)) { json = new JSONObject(json); }else { json = new JSONObject(); } } catch (JSONException e) { e.printStackTrace(); } } public MyClass myMethod1(String s1, String s2){ //Do something here } public String myMethod2(String s1){ //Do something here return null; } @Override public String toString() { return json.toString(); } public String jsonText() { return json.toString(); } protected MyClass(Parcel in) { try { json = in.readByte() == 0x00 ? null : new JSONObject(in.readString()); } catch (JSONException e) { e.printStackTrace(); } } @Override public int describeContents() { return 0; } @Override public void writeToParcel(Parcel dest, int flags) { if (json == null) { dest.writeByte((byte) (0x00)); } else { dest.writeByte((byte) (0x01)); dest.writeString(json.toString()); } } public static final Parcelable.Creator<MyClass> CREATOR = new Parcelable.Creator<MyClass>() { @Override public MyClass createFromParcel(Parcel in) { return new MyClass(in); } @Override public MyClass[] newArray(int size) { return new MyClass[size]; } }; public static MyClass myMethod3(){ //Do something here } }组件中的this.props.talk，因此点击后它不会执行任何操作，您也不会收到错误。

你需要做两件事：

1。）在Button组件中添加onClick处理程序。

Button

2。）在<button onClick={this.props.talk}>click me</button>组件中，确保在通过道具时使用Talker。如果您尝试执行this，则单击该按钮时会出现错误，因为talk={talk}为talk。您要找的是：undefined来引用您在talk={this.talk}组件中定义的函数talk()。

工作示例here。

Answer 3

您确定<Button talk={talk} />;有效吗？因为talk未定义，所以我有点困惑。它不应该工作。

如何在React中将事件处理程序作为prop传递？

3 个答案: