我不知道我是否正确地执行了操作…如果要从输入中获取值,请使用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> )
编辑:看起来这不再是问题,因为自编写此答案以来出现了有关如何处理这种情况的新想法。请参阅inanc的答案,而不是此答案。
引用在无状态组件中不可用。从React Docs:
因为无状态函数没有支持实例,所以您不能将引用附加到无状态函数组件。通常这不是问题,因为无状态函数不提供命令性API。如果没有命令性的API,无论如何您都无法使用实例。但是,如果用户希望找到无状态功能组件的DOM节点,则他们必须将该组件包装在有状态组件(例如ES6类组件)中,并将引用附加到有状态包装器组件上。