我有一个包含类组件的类。
当我提供一个 onClick Prop 供使用并尝试传递一个函数时,我收到以下错误:
AddForm.js:74 Uncaught TypeError: _this3.props.onClick 不是函数
代码:
export default class Company extends React.Component {
constructor(props) {
super(props);
this.state = {
AddOrView: <AddForm header="Add User" formFields={this.fields} />,
users: this.props.initialUsers
}
}
handleAdd() {
console.log('Hello World');
}
render() {
return (
<AddWithTitle onClick={e => this.setState({
AddOrView: <AddForm header="Add User"
formFields={this.fields}
formResponses=""
onClick={this.handleAdd} />
})
} src="blah.png">
Add User</AddWithTitle>
);
}
}
export default class AddForm extends React.Component {
render() {
return(
<button className="btn btn-primary"
formResponses={this.state.fieldValues}
onClick={() => this.props.onClick()} >
Save
</button>
);
}
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
谢谢你的帮助:)
最佳答案
您必须将该函数绑定(bind)到您的顶级组件,以便它在 onClick
方法中触发您想要触发的任何内容。
<AddWithTitle onClick={e => this.setState({
AddOrView: <AddForm header="Add User"
formFields={this.fields}
formResponses=""
onClick={this.handleAdd.bind(this)} />
})
} src="blah.png">
Add User</AddWithTitle>
关于javascript - 使用 ReactJS 通过 Prop 将函数传递给子组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41816090/