Question

我有一个包含类Component的类。

当我提供onClick prop以供使用并尝试传递函数时，我收到以下错误：

AddForm.js：74 Uncaught TypeError：_this3.props.onClick不是函数

代码：

＆＃13;

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>
      );
   }
};

＆＃13;

<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>

＆＃13;

感谢您的帮助：）

Answer 1

您必须将该函数绑定到顶级组件，才能在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>

使用ReactJS通过Prop将函数传递给Child Component

1 个答案: