Как обрабатывать ввод от ребенка к родителю в React

Question

Я пытаюсь обработать изменение ввода от дочернего к родительскому в React, и по какой-то причине я не могу набрать более одной буквы, я оставил код здесь:

Parent:

import querystring from 'querystring'
import React from 'react'
import { Route, Router } from 'react-router-dom'
import createBrowserHistory from 'history/createBrowserHistory'
import axios from 'axios'
import cookie from 'react-cookies'

import Admin from './Admin'
import Tienda from './Tienda/Tienda'
import LoginAdmin from './LoginAdmin/LoginAdmin'

const history = createBrowserHistory()

export default class Root extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      redirect: false,
      mail: '',
      pass: '',
    }
    this.login = this.login.bind(this)
    this.handleChange = this.handleChange.bind(this)
  }

  handleChange(e) {
    console.log(e.target.value)
    this.setState({ mail: e.target.value })
  }

  login() {
    const data = querystring.stringify({grant_type: 'password', client_id: 2, client_secret: 'HKpmjbWwRgt7McmpqZC2Dfp5JuFFRjEvj8U0G6aE', username: 'ralvaradosmx2013@gmail.com', password: 'ricardo1'})
    axios.post('http://localhost/ICEBIRD/back/public/oauth/token', data)
      .then((token) => {
        cookie.save('token', token.data.access_token, { path: '/' })
        this.setState({ redirect: true })
      })
      .catch(error => {
        console.log(error)
      })
  }
  render() {
    const LoginAdminProps = (props) => {
      return (
        <LoginAdmin
          login={this.login.bind(this)}
          redirect={this.state.redirect}
          handleTextChange={this.handleChange}
          email={this.state.mail}
          pass={this.state.pass}
          {...props}
        />
      )
    }
    return (
      <Router history={history}>
        <div>
          <Route exact path="/" component={Tienda} />
          <Route exact path="/admin" component={LoginAdminProps} />
          <Route path="/admin/dashboard" component={Admin} />
        </div>
      </Router>
    )
  }
}

Child:

import React from 'react'

import { Redirect } from 'react-router-dom'

import './LoginAdmin.css'

export default class LoginAdmin extends React.Component {
  render() {
    if (this.props.redirect) {
      return(
        <Redirect to={{
          pathname: '/admin/dashboard',
        }}/>
      )
    }

    return(
      <div className='background'>
        <div className="login-box">
          <div className="login-logo">
            <b>Admin</b>IceBird
          </div>
          <div className="login-box-body">
            <p className="login-box-msg">Inicia sesión para entrar al panel de administración</p>
            <div className="form-group has-feedback">
              <input id="mail" className="form-control" onChange={this.props.handleTextChange} placeholder="Email" type="email"/>
              <span className="fa fa-envelope form-control-feedback"></span>
            </div>
            <div className="form-group has-feedback">
              <input id="pass" className="form-control" onChange={this.props.handleTextChange} placeholder="Contraseña" type="password"/>
              <span className="fa fa-lock form-control-feedback"></span>
            </div>
            <button type="button" className="btn btn-primary btn-lg btn-block btn-sm" onClick={this.props.login}>Enviar</button>
          </div>
        </div>
      </div>
    )
  }
}

Кажется, проблема в том, что в Parent я использую set setState, тогда он не позволяет мне написать более одного символа, если я удаляю его, я могуна самом деле увидеть console.log работает.

Answer 1

Всякий раз, когда вы набираете что-то, вызывается props.handleTextChange, который обновляет состояние родительского компонента, который повторно отображает дочерний элемент со значениями initail поля ввода как none.Вы должны установить значение поля ввода в this.props.email или this.props.pass соответственно.

<input id="mail" className="form-control" onChange={this.props.handleTextChange} value={this.props.email} placeholder="Email" type="email"/>

Answer 2

Можете ли вы попытаться сохранить метод handleTextChange в самом дочернем элементе и обновить родительское состояние при нажатии кнопки?

Вот пример реализации:

https://stackblitz.com/edit/react-qidphg?file=LoginAdmin.js

Answer 3

Попробуйте передать значение в ваш.

пример:

child:

<input
    id="mail"
    className="form-control"
    onChange={this.props.handleTextChange}
    placeholder="Email"
    type="email"
    value={this.props.email}/>

и:

<input
    id="pass"
    className="form-control"
    onChange={this.props.handleTextChange}
    placeholder="Contraseña" type="password"
    value={this.props.pass}/>