Shopify polaris (React js) 按钮点击事件不起作用
Shopify polaris (React js) button click event is not working
我是 React js 的新手。
几个小时后,我终于有了一些登录框代码渲染。
但问题是我无法在按钮上绑定点击事件。
我在用什么
- Laravel 5.6
- 反应 js (16.3.1)
到目前为止我尝试的是
- https://www.tutorialspoint.com/reactjs/reactjs_events.htm
- https://reactjs.org/docs/handling-events.html
这是我的最终代码
import React, {Component} from 'react';
import {Page, Card, Button,List,TextField} from '@shopify/polaris';
export default class Login extends React.Component {
constructor() {
super();
this.loginBtbClicked = this.loginBtbClicked.bind(this);
}
loginBtbClicked() {
debugger;
console.log('Hello');
}
render() {
debugger;
/* Some css code has been removed for brevity */
var divStyle = {
width: '500px'
};
return (
<div className="mt-5 mx-auto" style={ divStyle }>
<Card title="Login" subdued sectioned>
<div>
<TextField label="Store Url" type="text" helpText='ex. store.myshopify.com'></TextField>
</div>
<div className="mt-5">
<Button size="large" fullWidth primary onClick = {this.loginBtbClicked} >Login</Button>
</div>
</Card>
</div>
);
}
}
也帮助我在 React js 中为表单提交和单击事件提供最佳实践。
这是 github 项目的 link
https://github.com/little-isaac/shopify-polaris-laravel-test.git
我已经更改了 webpack.mix.js 文件的路径
来自
mix.react('resources/assets/js/app.js', 'public/app.js')
到
mix.react('resources/assets/js/app.js', 'js/app.js')
忘记更改 public 路径
mix.setPublicPath('');
我是 React js 的新手。 几个小时后,我终于有了一些登录框代码渲染。
但问题是我无法在按钮上绑定点击事件。 我在用什么
- Laravel 5.6
- 反应 js (16.3.1)
到目前为止我尝试的是
- https://www.tutorialspoint.com/reactjs/reactjs_events.htm
- https://reactjs.org/docs/handling-events.html
这是我的最终代码
import React, {Component} from 'react';
import {Page, Card, Button,List,TextField} from '@shopify/polaris';
export default class Login extends React.Component {
constructor() {
super();
this.loginBtbClicked = this.loginBtbClicked.bind(this);
}
loginBtbClicked() {
debugger;
console.log('Hello');
}
render() {
debugger;
/* Some css code has been removed for brevity */
var divStyle = {
width: '500px'
};
return (
<div className="mt-5 mx-auto" style={ divStyle }>
<Card title="Login" subdued sectioned>
<div>
<TextField label="Store Url" type="text" helpText='ex. store.myshopify.com'></TextField>
</div>
<div className="mt-5">
<Button size="large" fullWidth primary onClick = {this.loginBtbClicked} >Login</Button>
</div>
</Card>
</div>
);
}
}
也帮助我在 React js 中为表单提交和单击事件提供最佳实践。
这是 github 项目的 link
https://github.com/little-isaac/shopify-polaris-laravel-test.git
我已经更改了 webpack.mix.js 文件的路径
来自
mix.react('resources/assets/js/app.js', 'public/app.js')
到
mix.react('resources/assets/js/app.js', 'js/app.js')
忘记更改 public 路径
mix.setPublicPath('');