Question

我坚持这个简单的问题，当我点击一个按钮时，我试图在按钮上的onClick事件内同时触发多个功能。但是，当我尝试这样做时，我收到此错误：

Uncaught TypeError: _this2.removeLocation is not a function

这是我的功能：

const renderLocations = ({ fields, meta: { touched, error, submitFailed } }) => {

    return (
      <div>
        <div className={styles.contactInfoSection}>
          <h2>Locations</h2>
          <div>
            <button type="button" className={styles.add} onClick={() => fields.push({})}>Add Location</button>
            {(touched || submitFailed) && error && <span>{error}</span>}
          </div>
        </div>
        <ul className={styles.locationsList}>
          {fields.map((location, index) =>
            <li className={styles.locationCard} key={index}>
              <div>
                <Field
                  name={`${location}.street`}
                  hintText="Street"
                  component={TextField}
                  label="Street"/>
                <Field
                  name={`${location}.city`}
                  hintText="City"
                  component={TextField}
                  label="City"/>
                <Field
                  name={`${location}.state`}
                  hintText="State"
                  component={TextField}
                  label="State"/>
                <Field
                  name={`${location}.zip`}
                  hintText="Zip"
                  component={TextField}
                  label="Zip"/>
              </div>
              <button
                type="button"
                title="Remove"
                onClick={() => {
                  fields.remove(index);
                  this.removeLocation();
                }}>Remove</button>
            </li>
          )}
        </ul>
      </div>
    );
  }

我试图从我的组件中激活一个看起来像这样的函数：

export class ManageCustomerForm extends React.Component { 

  constructor(props) {
    super(props);

    //this.removeLocation = this.removeLocation.bind(this);
  }

  removeLocation() {
    console.log('remove location?');
    this.props.removeLocation();
  }

}

有谁知道这里的问题是什么？

Answer 1

所以我所做的是将我的内联函数转换为我的组件内部的已定义函数，以便我可以在同一组件内部访问它。

React.js内联函数获取错误onClick：TypeError：_this2。<function-name>不是函数

1 个答案: