Question

我试图在React中处理从子节点到父节点的输入更改，由于某种原因我无法键入多个字母，我将代码留在此处：

家长：

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

子：

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

尝试传递你的值。

为例：

子：

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

Answer 2

每当你输入一些props.handleTextChange被调用时，它会更新父组件的状态，该组件将输入字段的initail值重新呈现给子组件为none。您必须将输入字段的值设置为this.props.email或this.props.pass 相应

＆＃13;

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

＆＃13;

Answer 3

您可以尝试将 handleTextChange 方法保留在子级本身＆amp;单击按钮更新父状态？

以下是一个示例实现：

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

如何在React中处理从子级到父级的输入

3 个答案: