[英]Reactjs onclick not working
I have: 我有:
import React from 'react';
import FilterButton from './FilterButton';
import FilterJobsScreen from '../../actions/jobs-screen/FilterJobsScreen';
export default class RightPanel extends React.Component {
constructor() {
super();
this.state = {
counts: {},
filters: {}
}
}
componentDidMount() {
this.load();
}
componentWillReceiveProps(newProps) {
if (newProps.counts) {
this.setState({
counts: newProps.counts
});
}
}
load() {
this.setState({
counts: {
my_jobs: 1,
not_approved: 5
}
});
}
onClick (e) {
alert(e)
var filters_array = this.states.filters;
filters_array.push(e);
this.setState({
filters: filters_array
})
this.context.executeAction(FilterJobsScreen, this);
}
render() {
return (
<div>
<div className="controls">
<span className="title">Filters</span>
<FilterButton onClick={this.onClick.bind(this, 'My jobs')} name='My jobs' count={this.state.counts.my_jobs} active={true}/>
<FilterButton onClick={this.onClick.bind(this, 'Not approved')} name='Not approved' count={this.state.counts.not_approved}/>
<FilterButton onClick={this.onClick.bind(this, 'Supply')} name='Supply' count={this.state.counts.supply}/>
<FilterButton onClick={this.onClick.bind(this, 'Repair')} name='Repair' count={this.state.counts.repair}/>
<FilterButton onClick={this.onClick.bind(this, 'Service exchange')} name='Service exchange' count={this.state.counts.service_ex}/>
<FilterButton onClick={this.onClick.bind(this, 'Urgent')} name='Urgent' count={this.state.counts.urgent}/>
<FilterButton onClick={this.onClick.bind(this, 'Today')} name='Today' count={this.state.counts.today}/>
<FilterButton onClick={this.onClick.bind(this, 'Overdue')} name='Overdue' count={this.state.counts.overdue}/>
</div>
<div className="controls">
<span className="title">Sorts</span>
</div>
</div>
)
}
};
RightPanel.contextTypes = {
executeAction: React.PropTypes.func.isRequired
};
export default RightPanel;
FilterButton: FilterButton:
import React from 'react';
export default class FilterButton extends React.Component {
constructor(props) {
super(props);
}
componentWillMount() {
}
render() {
return (
<button className={'btn btn-filter btn-sm'+(this.props.active ? ' active' : '')}><span
className="filter-name">{this.props.name}</span><span className="filter-count">{this.props.count}</span>
</button>
)
}
}
FilterButton.contextTypes = {
executeAction: React.PropTypes.func.isRequired
};
export default FilterButton;
But when I click on one of my buttons nothing happens at all. 但是,当我单击其中一个按钮时,什么也没有发生。 What have I done wrong? 我做错了什么?
When providing a property to a react component (such as FilterButton
), this property goes to the this.props
member of the component. 在为this.props
组件(例如FilterButton
)提供属性时,此属性将转到该组件的this.props
成员。 So if you provide an onClick
property, it can be found in this.props.onClick
of the component. 因此,如果您提供onClick
属性,则可以在组件的this.props.onClick
中找到它。 The property can be any value, eg a number or a function. 该属性可以是任何值,例如数字或函数。 See here for more information. 浏览此处获取更多信息。
In your code, you are providing each of your FilterButton
an onClick
property that is the onClick
method of your RightPanel
(bound to the RightPanel
with an argument). 在代码中,您将为每个FilterButton
提供一个onClick
属性,该属性是RightPanel
的onClick
方法(通过参数绑定到RightPanel
)。 However, the FilterButton
component itself does not do anything with this property. 但是, FilterButton
组件本身对此属性不做任何事情。
I suspect, you want this function to be called when the actual HTML button element of the FilterButton
component is clicked. 我怀疑,您希望在单击FilterButton
组件的实际HTML按钮元素时调用此函数。 To do so, you need to forward this function to the "real" HTML button (ie assign it to its onClick
property). 为此,您需要将此函数转发到“实际” HTML按钮(即,将其分配给其onClick
属性)。
export default class FilterButton extends React.Component {
constructor(props) {
super(props);
}
componentWillMount() {
}
render() {
return (
<button onClick={this.props.onClick} className={'btn btn-filter btn-sm'+(this.props.active ? ' active' : '')}>
<span className="filter-name">{this.props.name}</span><span className="filter-count">{this.props.count}</span>
</button>
)
}
}
FilterButton.contextTypes = {
executeAction: React.PropTypes.func.isRequired
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.