输入值为空反应
问题描述:
我不确定这笔交易可能是什么愚蠢的,但是当我处理电子邮件和处理密码处理程序时,我得到了我在表单上输入的文本的空值。输入值为空反应
LoginContainer
import React, { Component } from 'react'
import * as AsyncActions from '../actions/User/UserAsyncActions'
import Login from '../components/Login/Login'
class LoginContainer extends Component {
constructor(props) {
super(props)
this.state = {
email: '',
password: ''
}
this.emailIsValid = this.emailIsValid.bind(this)
this.handleEmailInput = this.handleEmailInput.bind(this)
this.handlePasswordInput = this.handlePasswordInput.bind(this)
this.handleLoginPressed = this.handleLoginPressed.bind(this)
}
handlePasswordInput(e, password) {
e.persist()
this.setState(password)
}
handleEmailInput(e, email) {
e.persist()
this.setState(email)
}
handleLoginPressed(e) {
e.persist()
// e.preventDefault()
if (this.emailIsValid(this.state.email) &&
this.passwordIsValid(this.state.password)) {
this.props.login(this.state.email, this.state.password)
}
}
emailIsValid(e, email) {
e.persist()
if (!email) {
return false
}
return true
}
passwordIsValid(e, password) {
e.persist()
if (!password) {
return false
}
return true
}
render(){
return(<Login
handleEmailInput={this.handleEmailInput}
handlePasswordInput={this.handlePasswordInput}
login={this.handleLoginPressed}
/>)
}
}
const mapStateToProps = state => {
return {
requesting: state.user.requesting,
loggedIn: state.user.loggedIn,
token: state.user.token,
session: state.user.session
}
}
export const mapDispatchToProps = {
login: AsyncActions.login
}
export { Login }
export default connect(mapStateToProps, mapDispatchToProps)(LoginContainer)
登录
class Login extends Component {
render(){
return (
<div>
<LoginForm
handleEmailInput={this.props.handleEmailInput}
handlePasswordInput={this.props.handlePasswordInput}
login={this.props.login}
/>
</div>
)
}
}
export default Login
LoginForm的
import React, { Component } from 'react'
import { Button, FormControl, FormGroup, ControlLabel, PageHeader } from 'react-bootstrap'
class LoginForm extends Component {
render(){
return (
<div className='ft-login-form'>
<PageHeader className='ft-header'>Login</PageHeader>
<form onSubmit={this.props.login}>
<FormGroup controlId="formBasicText" >
<ControlLabel>Email</ControlLabel>
<FormControl
bsSize="small"
className="ft-username"
componentClass="input"
onChange={this.props.handleEmailInput}
placeholder="Enter mail"
style={{ width: 300}}
type="text"
// value={this.state.email}
/>
<ControlLabel>Password</ControlLabel>
<FormControl
bsSize="small"
className="ft-password"
componentClass="input"
onChange={this.props.handlePasswordInput}
placeholder="Enter Password"
style={{ width: 300}}
type="text"
// value={this.state.password}
/>
</FormGroup>
<Button
className='ft-login-button'
type='submit'>Login</Button>
</form>
</div>)
}
}
export default LoginForm
答
看起来你是O:与value={this.state.password}
正确的路径。但是由于您的状态位于父组件中,因此您必须将状态关闭并且值变为value={this.props.value}
。事件处理程序通常是这个样子:
handlePasswordInput(e, password) {
e.persist()
this.setState({ password: e.target.value })
}
他们可能是不同的,由于FormControl组件,但它是值得改变他们看,如果这是你的问题。此外,onChange处理程序隐式传入e
,并且必须使用箭头函数表达式明确传递其他任何内容。
编辑:如果他们能够像你注释中做一些事情,他们可能做了这样的事:
handlePasswordInput(e, password) {
e.persist()
const password = e.target.value
this.setState({ password })
}
在ES6,{ password }
相同{ password: password}
也是您使用以某种方式解构{}? – PositiveGuy
它的工作我确实得到了你的改变的价值。我想知道其他人如何得到这个工作,因为他们能够这样做:handlePasswordInput {{password}){this.setState({password}) } – PositiveGuy
react-bootstrap Button组件需要一个onClick prop,所以你可以写一些类似于登录'。这就是你可能想要的,因为提交表单会刷新页面,你将失去所有的信息。 –