React 无状态组件 this.refs..value? [英] React stateless component this.refs..value?

问题描述

我不知道我这样做是否正确...如果我想从输入中获取值，我使用 this.refs.whatever.value.trim() 但如果该输入是无状态函数组件，我该如何检索 onSubmit 的值?

经过研究，我现在知道这不正确，但是您应该如何从这些输入字段中获取价值?

import React, {Component} from 'react'从'../components/forms/InputField'导入{InputField}从'../components/forms/Button'导入{Button}导出默认类 SignupWrapper 扩展组件 {_handleSubmit(e) {e.preventDefault();const email = this.refs.email.value.trim();const 密码 = this.refs.password.value.trim();const 确认 = this.refs.confirm.value.trim();控制台日志({电子邮件，密码，确认})；}使成为() {返回 (<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={'需要密码'} ref="密码"/><InputField type={'password'} name={'confirm'} text={'confirm password'}helpBlock={'需要密码确认'} ref="confirm"/><Button type={'submit'} className={'btn btn-primary'} text={'signup'}/></表单>)}}

这是无状态输入字段

从 'react' 导入 Reactexport 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"数据条带={props.stripe}/><span className="help-block">{props.helpBlock}</span>

)

解决方案

看起来这不再是问题了，因为自从写下这个答案以来，出现了关于如何处理这种情况的新想法.参考 inanc 的答案而不是这个答案.

Refs 在无状态组件中不可用.来自 React 文档:

<块引用>

因为无状态函数没有支持实例，所以不能将引用附加到无状态函数组件.通常这不是问题，因为无状态函数不提供命令式 API.如果没有命令式 API，无论如何您都无法对实例做很多事情.但是，如果用户想要查找无状态函数组件的 DOM 节点，则必须将该组件包装在有状态组件(例如 ES6 类组件)中，并将 ref 附加到有状态包装组件.

I don't know if I'm doing this correctly... If I want to get value from an input I use this.refs.whatever.value.trim() but if that input is a stateless function component how do I do retrieve the value onSubmit?

I know this isn't correct now after researching but how are you supposed to get value from these input fields?

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

this is the stateless inputfield

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

解决方案

Edit: Looks like this is not the issue anymore, since new ideas on how to handle this situation arose since this answer was written. Refer to inanc's answer instead of this one.

Refs are unavailable in stateless components. From React Docs:

Because stateless functions don't have a backing instance, you can't attach a ref to a stateless function component. Normally this isn't an issue, since stateless functions do not provide an imperative API. Without an imperative API, there isn't much you could do with an instance anyway. However, if a user wants to find the DOM node of a stateless function component, they must wrap the component in a stateful component (eg. ES6 class component) and attach the ref to the stateful wrapper component.

这篇关于React 无状态组件 this.refs..value?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！