[英]Passing a function to Child Component through a Prop using ReactJS
我有一个包含类Component的类。
当我提供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>
谢谢您的帮助 :)
您必须将函数绑定到顶级组件,以便在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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.