Доступ к значению дочернего компонента

Question

Я хочу получить доступ к значению дочернего компонента ввода из родительского компонента. Я последовал за ответом на этот вопрос: Как получить доступ к состоянию ребенка в React? но это не работает. Поля ввода не обновляются при вводе текста, и я получил эту ошибку:

Uncaught TypeError: Cannot read property 'setState' of undefined
        at onFieldsChange (bundle.js:28511)
        at HTMLUnknownElement.callCallback (bundle.js:2807)
        at Object.invokeGuardedCallbackDev (bundle.js:2845)
        at Object.invokeGuardedCallback (bundle.js:2894)
        at Object.invokeGuardedCallbackAndCatchFirstError (bundle.js:2908)
        at executeDispatch (bundle.js:3173)
        at executeDispatchesInOrder (bundle.js:3195)
        at executeDispatchesAndRelease (bundle.js:3293)
        at executeDispatchesAndReleaseTopLevel (bundle.js:3304)
        at Array.forEach (<anonymous>)

Обновление: Я исправил ошибку консоли, используя функцию стрелки для onFieldsChange в LoginForm, но поля все еще не обновляются при вводе текста.

Вот мой LoginForm, который является родительским компонентом:

import React, { Component } from 'react';
import Button from '../Recyclable/Button';
import AlertBar from '../Recyclable/AlertBar';
import InputGroup from '../Recyclable/InputGroup';
import {connect} from 'react-redux';
import { bindActionCreators } from 'redux';

export default class LoginForm extends Component {
    constructor (props) {
        super(props);
        this.state = {
            username: '',
            password: '',
            rememberMe: false,
            submitting: false
        };
    }

    onChangeCheckBox = (event) => {
        this.setState({  [event.target.name]: event.target.checked });
    };

    validateLoginForm = (username,password) => {
        if(username.length >= 0 && password.length >= 0){
            return true;
        }
        this.props.loginError = {
            message: 'All fields are required'
        }
        return false;       
    }

    onSubmit = (event) =>  {
        event.preventDefault();
        console.log('submitted');
        let { username, password } = this.state;
        console.log(username, password);
        if(this.validateLoginForm(username,password)) {
            this.props.login(username, password);
        }
        this.setState({
            username: '',
            password: ''
        });
    }

    onFieldsChange = (fieldId, value) => {
        console.log([fieldId]);
        this.setState({ [fieldId]: value });
    }

    render() {
        const { loginError } = this.props;
        return (
            <div className="container">
                <div className="login-container">
                    <div id="output">{loginError}</div>
                    <div className="avatar"></div>
                    <h3>Login</h3>
                    <div className="form-box">
                        <form onSubmit={this.onSubmit} >
                            <InputGroup 
                                name="username" 
                                type="text" 
                                placeholder="username" 
                                onChange={this.onFieldsChange}
                                value={this.state['username']}
                            />
                            <InputGroup 
                                name="password" 
                                type="password" 
                                placeholder="password" 
                                onChange={this.onFieldsChange} 
                                value={this.state['password']} 
                            />
                            <div className="small-text"></div>
                            <div className="small-text" >
                                <a href="#">Forgot password?</a>
                            </div>
                            <Button buttonLabel="Login" />
                        </form>

                    </div>
                </div>
            </div>
        );
    }
}

Вот мой InputGroup, который является дочерним компонентом:

import React, {Component} from 'react';

export default class InputGroup extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    const text = event.target.value;
    console.log('props name', this.props.name);
    this.props.onChange(this.props.name, text);
  }

  render() {
    return (
      <div className="input-group">
        <input onChange={this.handleChange} value={this.props.value} {...this.props} />
      </div>
    );
  }
}

Answer 1

Это lexical scope проблема. Пользователь arrow function.

 onFieldsChange=(fieldId, value) =>{
            console.log([fieldId]);
            this.setState({ [fieldId]: value });
        }

Пожалуйста, check here для более.