Как передать функцию в другой компонент?

Question

[DaniilRuss]

При передачи функции в консоли пишет ошибку : TypeError: this.props.onSignIn is not a function

App.js

import React, { Component } from 'react'
import Auth from './Auth'
import Main from './Main'
import './style/style.css';

export default class App extends Component {
	constructor(props) {
		super(props)
	
		this.state = {
			user: [],
			isLogin: false,
		}
	}

	signIn(login, password) {
		console.log("Good")
    this.setState({
      user: {
        login,
				password,
			},
			isLogin:true		
    })
	}
	
	render() {
		return (
			<div>
				{ (this.state.isLogin) ? <Main />  : <Auth onSignIn={this.signIn.bind(this)}/> }	
			</div>
		)
	}
}

SignIn.js

import React, { Component } from 'react'
import { Form, Input, Button, Checkbox } from 'antd';
import { Link } from "react-router-dom";
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import '../components/style/style.css'


export default class SignIn extends Component {

	onFinish = values => {
    console.log('Received values of form: ', values);
    let login = values.login;
    let password = values.password;
    this.props.onSignIn(login, password)
	}

	render() {
		return (
			<div className="sign_in">
            <Form
              name="normal_login"
              className="login-form"
              initialValues={{
              remember: true, }}
              onFinish={this.onFinish}>
              <h1>Опросник</h1>
              <Form.Item
                name="login"
                rules={[
                  {
                    required: true,
                    message: 'Укажите свой логин!',
                  },
                ]}>
                <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Логин" />
              </Form.Item>
              <Form.Item
                name="password"
                rules={[
                  {
                    required: true,
                    message: 'Введите пароль!',
                  },
                ]}
              >
                <Input
                  prefix={<LockOutlined className="site-form-item-icon" />}
                  type="password"
                  placeholder="Пароль"
                />
              </Form.Item>
              <Form.Item>
              <Form.Item name="remember" valuePropName="checked" noStyle>
                <Checkbox>Запомнить меня?</Checkbox>
              </Form.Item>

                <a className="login-form-forgot" href="/change_pass">
                  Забыли пароль?
                </a>
              </Form.Item>
              <Form.Item>
                <Button type="primary" htmlType="submit" className="login-form-button">
                  Войти
                </Button>
                или <Link to="/sign_up">зарегистрироваться сейчас</Link>
              </Form.Item>
            </Form>  
			</div>
		)
	}
}

Comments

[Владимир Проскурин]

В ваших примерах App нигде не вызывает SignIn

[DaniilRuss]

Владимир Проскурин, ой точно, что то я вообще запарился))

Answer 1

[shsv382]

Это из-за стрелочной функции, в ней нет своего this, надо так:

constructor(props) {
    super(props);
    this.onFinish = this.onFinish.bind(this);
}

onFinish(values) {
    console.log('Received values of form: ', values);
    let login = values.login;
    let password = values.password;
    this.props.onSignIn(login, password)
  }