javascript - 这个内部反应类组件的工作方式不同

Question

我是 React 新手，如果我尝试访问openm2()using this.openm2()inopenm方法，则会出现错误

“无法读取未定义的属性‘openm2’”

class Car extends React.Component {
  openm2() {
    return "Hello from openm2";
  }

  openm(e) {
    e.preventDefault();
    this.openm2(); Here I get error

  }

  render() {
    return (
      <div>
        <h1>
          {this.props.type.map((item, index) => {
            return <p key={index}>{item}</p>;
          })}
        </h1>
        <form onSubmit={this.openm}>
          <input type="text" name="type" />
          <button>Remo all</button>
        </form>
      </div>
    );
  }
}

标签： javascriptreactjs

Answer 1

将您的功能更改openm为箭头功能，它this会自动绑定到功能。

openm = (e) => {
    e.preventDefault();
    this.openm2(); Here I get error
}

或者，您可以像这样绑定this，

<form onSubmit={this.openm.bind(this)}>

this或者，您可以在构造函数中绑定

constructor(props){
  super(props);
  this.openm = this.openm.bind(this)
}