Реакция безстоящего компонента this.refs..value?

Question

Я не знаю, правильно ли я делаю это ... Если я хочу получить значение из ввода, я использую 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> 
    ) 
    } 
} 

это безгосударственного 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> 
) 

Answer 1

Edit: Похоже, это не проблема больше, поскольку новые идеи о том, как справиться с этой ситуацией возникла, так как этот ответ был написан. Обратите внимание на ответ inanc вместо этого.

Refs недоступны в компонентах без гражданства. От React Docs:

Поскольку апатриды функции не имеют резервное экземпляр, вы не можете прикреплять реф к безгосударственного функции компонента. Обычно это не проблема, так как функции без гражданства не предоставляют императивный API. Без императивного API в любом случае вы ничего не можете сделать с экземпляром. Однако, если пользователь хочет найти узел DOM компонента функции без состояния, он должен обернуть компонент в компонент с состоянием (например, компонент класса ES6) и прикрепить ref к компоненту-оболочке с состоянием.

Answer 2

Вы можете использовать ref s внутри компонентов без гражданства.

Здесь также находится мой example fiddle, который показывает вам, как это работает.

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

Answer 3

@inanc, показать хороший метод, но я предлагаю альтернативный способ использования целевой цели для получения ссылки на элемент DOM. Когда вы используете элемент формы, вы можете назвать свои элементы ввода и использовать его для доступа к объекту формы.

const onSubmit = fn => e => { 
    e.preventDefault() 
    const city = e.target.city.value // Access elements through `form` 
    if (city) { 
    fn(city) 
    } 
} 

const MyComponent = ({ 
    onChange 
}) => { 
    return ( 
    <div> 
     <form onSubmit={onSubmit(onChange)}> 
     <input type='text' name='city' placeholder='Enter City Name' /> 
     <button>Go!</button> 
     </form> 
    </div> 
) 
} 

Answer 4

В настоящее время, вы хотели бы avoid to use the ref attribute, чтобы получить значения из полей ввода. Вместо этого вы должны использовать локальное состояние React. Исй атрибут зарезервирован для только few use cases:

• Управления фокуса, выделения текста, или воспроизведения медиа
• Интеграции с библиотеками DOM сторонних
• Срабатыванием императивных анимации

Answer 5

Вы можете» t использовать refs в компонентах реакции без учета состояния (+ a для Moti Azu для его фрагмента из документации).

Вы можете использовать несколько методов, чтобы получить материал в/из лиц без компонентов (без использования реф или использовать компоненты класса), я создал ниже фрагмент кода, чтобы проиллюстрировать

1. Как вы можете передать материал в без гражданства компонент (реквизиты метки статически статичны в родительском компоненте).
2. Как вы можете получить материал из безгосударственного компонента без использования рефов (входной компонент)

попробовать его & дайте мне знать, если вы все еще есть проблемы, наслаждаться ...

// Stateless Component (just a <div> component with prop) 
 
const StatelessComponent = props => (
 
    <div>{props.label}</div> 
 
); 
 

 
// Stateless input Component 
 
const InputComponent = props => { 
 
    return (
 
    <input 
 
     value={props.name} 
 
     onChange={props.handleChange} 
 
    /> 
 
); 
 
}; 
 

 
// Parent Class Component 
 
class ParentComponent extends React.Component { 
 
    state = { 
 
    firstName: "HELCODE"  
 
    }; 
 

 
    handleChange = event => { 
 
    this.setState({ 
 
     firstName: event.target.value, 
 
    }); 
 
    }; 
 
    
 
    render() { 
 
    const {title} = this.props; 
 
    console.log("rendered"); 
 
    return (
 
     <div> 
 
     <h3>{title}</h3> 
 
     <StatelessComponent 
 
      label="This is a label passed to a stateless component as prop" 
 
     /> 
 
     <br/> 
 
     <InputComponent 
 
      name={this.state.firstName} 
 
      handleChange={this.handleChange} 
 
     /> 
 
     
 
     <p>{this.state.firstName}{this.state.lastName} can read stuff from stateless components withough Ref using States</p> 
 
     <br/> 
 
     
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
// Render it 
 
ReactDOM.render(
 
    <ParentComponent title="Parent Component" />, 
 
    document.getElementById("react") 
 
);

<div id="react"></div> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Answer 6

просто добавить решение для тех, кто используют реакцию-семантический-UI.

https://react.semantic-ui.com/addons/ref

Вы можете просто обернуть без гражданства функционального компонента в этом Ref компоненте для извлечения узла DOM.

(очень полезно иметь дело с прокруткой позиции Sidebar.Pushable!)