Shopify Polaris（React.js）按钮点击事件失效求助

Hey there! I feel your pain—spending hours getting the UI rendered perfectly only to hit a wall with event bindings is the worst. Let’s break down why your button click might not be working and fix it right up.

First, the most common culprit in React class components is incorrect this binding. Since you’re using React 16.3.1 (a solid version!), here are three reliable ways to get your click event working:

1. Bind this in the Constructor #

This is the traditional approach and works great for class components. You explicitly bind your event handler to the component instance in the constructor:

import React, {Component} from 'react';
import {Page, Card, Button, TextField} from '@shopify/polaris';

export default class Login extends Component {
  constructor(props) {
    super(props);
    // Bind the handler to ensure `this` refers to the component
    this.handleLogin = this.handleLogin.bind(this);
  }

  handleLogin() {
    // Your login logic goes here—e.g., validate fields, send API request
    console.log('Login button clicked!');
  }

  render() {
    return (
      <Page title="Login">
        <Card sectioned>
          <TextField label="Email" placeholder="Enter your email" />
          <TextField label="Password" type="password" placeholder="Enter your password" />
          {/* Use the bound handler here */}
          <Button onClick={this.handleLogin} primary>Login</Button>
        </Card>
      </Page>
    );
  }
}

2. Use an Arrow Function in the onClick Prop #

If you don’t want to mess with the constructor, you can wrap your handler call in an arrow function directly in the render method. Arrow functions automatically inherit this from the surrounding context:

// ... (imports and class definition same as above)

handleLogin() {
  console.log('Login button clicked!');
}

render() {
  return (
    <Page title="Login">
      <Card sectioned>
        <TextField label="Email" placeholder="Enter your email" />
        <TextField label="Password" type="password" placeholder="Enter your password" />
        {/* Arrow function ensures `this` is correct */}
        <Button onClick={() => this.handleLogin()} primary>Login</Button>
      </Card>
    </Page>
  );
}

Note: This creates a new function every time the component renders, which is fine for most cases (like a login button). For performance-critical components, stick to the constructor method.

3. Define the Handler as an Arrow Function Class Property #

React 16+ supports class properties, so you can define your handler directly as an arrow function. This way, this is automatically bound to the component instance without extra setup:

import React, {Component} from 'react';
import {Page, Card, Button, TextField} from '@shopify/polaris';

export default class Login extends Component {
  // Arrow function class property—`this` is bound automatically
  handleLogin = () => {
    console.log('Login button clicked!');
    // Add your login logic here
  }

  render() {
    return (
      <Page title="Login">
        <Card sectioned>
          <TextField label="Email" placeholder="Enter your email" />
          <TextField label="Password" type="password" placeholder="Enter your password" />
          <Button onClick={this.handleLogin} primary>Login</Button>
        </Card>
      </Page>
    );
  }
}

Quick Checks to Rule Out Other Issues #

• Double-check the spelling: React uses camelCase for events, so it’s onClick (not onclick like plain HTML).
• Confirm that Shopify Polaris’s Button component accepts the onClick prop (it does—all Polaris interactive components support standard React event props).

Give these solutions a try—any of them should get your button click working. Let me know if you hit any other roadblocks!

内容的提问来源于stack exchange，提问作者Milind Patel