我不知道我这样做是否正确......
如果我想从输入中获取值,我使用 this.refs.whatever.value.trim() 但如果该输入是无状态函数组件,我如何检索 onSubmit 的值?
经过研究,我知道现在这是不正确的,但是您应该如何从这些输入字段中获取价值?
import React, {Component} from 'react'
import {InputField} from '../components/forms/InputField'
import {Button} from '../components/forms/Button'
export default class SignupWrapper extends Component {
_handleSubmit(e) {
e.preventDefault();
const email = this.refs.email.value.trim();
const password = this.refs.password.value.trim();
const confirm = this.refs.confirm.value.trim();
console.log({email, password, confirm});
}
render() {
return (
<form id="application-signup" onSubmit={this._handleSubmit.bind(this)}>
<InputField type={'email'} name={'email'} text={'email'}
helpBlock={'email is required'} ref="email" />
<InputField type={'password'} name={'password'} text={'password'}
helpBlock={'password is required'} ref="password" />
<InputField type={'password'} name={'confirm'} text={'confirm password'}
helpBlock={'password confirmation is required'} ref="confirm" />
<Button type={'submit'} className={'btn btn-primary'} text={'signup'} />
</form>
)
}
}
这是无状态输入字段
import React from 'react'
export const InputField = (props) => (
<div className="form-group col-xs-12">
<label htmlFor={props.name}>{props.text}</label>
<input type={props.type} name={props.name} className="form-control"
data-stripe={props.stripe} />
<span className="help-block">{props.helpBlock}</span>
</div>
)
您可以使用ref
s 位于无状态组件内。
这也是我的小提琴示例 http://jsfiddle.net/inancgumus/dvfdj4wx这向您展示了它是如何工作的。
import React from 'react'
export default ({ onChange }) => {
let cityInput
const onSubmit = e => {
e.preventDefault()
onChange(cityInput.value)
}
return (
<form onSubmit={ onSubmit }>
<input type='text' placeholder='Enter City Name'
ref={ el => cityInput = el } />
<button>Go!</button>
</form>
)
}
Note:尽管这是一种方法,但除非您确实需要,否则不建议使用这种方法。尝试更多地考虑重新设计你的 React 代码,而不是像这样修改它。您可以阅读更多相关内容here https://reactjs.org/docs/refs-and-the-dom.html.
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)