Доступ к входному значению от элемента с помощью ReactJs

Question

Как проверить, чтобы поле ввода содержало какое-либо значение или нет из другого элемента. Моя попытка,

<div className='input-item'> 
     <input ref="accessKey" name="username" className="lci-text" type="text"/> 

     <label className={"helpers" + ((this.ref.accessKey.value.length > 0) ? 'toggled' : '')}>Access Key</label> 
</div> 

Я пытаюсь добавить класс «.toggled» на этикетку, когда вход имеет какое-либо значение, но получаю следующее сообщение об ошибке в консоли.

Uncaught TypeError: Cannot read property 'accessKey' of undefined 

Update

Я также попытался this.refs.accessKey.value.length это время получить следующую ошибку

Uncaught TypeError: Cannot read property 'value' of undefined 

Пожалуйста, помогите мне разобраться в этом.

Answer 1

Не рекомендуется обращаться к ref непосредственно, чтобы внести изменения в один и тот же компонент. Кроме того, поскольку вы используете реакцию, вам необходимо использовать this.state.

В качестве примечания, вы должны сделать использование npm packageclassNames

Ниже ваш обновленный код, с помощью React государства.

HTML

<div id="container"></div> 

CSS

.helpers{ color: red } 
.helpers.toggled{ color: green } 

Javascript

var Hello = React.createClass({ 

    getInitialState: function() { 
    return {value: ''}; 
    }, 

    handleChange: function(event) { 
    this.setState({value: event.target.value}); 
    }, 

    render: function() { 
    var toggled = this.state.value.length ? ' toggled' : ''; 

    return (
     <div> 
     <input type='text' 
      value={ this.state.value } 
      onChange={ this.handleChange } 
     /> 
     <label className={ 'helpers' + toggled }>Access Key</label> 
     </div> 
    ); 
    } 

}); 

ReactDOM.render(
    <Hello />, 
    document.getElementById('container') 
); 

Fiddle

https://jsfiddle.net/qejxjo1x/2/

---

Official Notes and References:

• рефов доступа Никогда внутри метод визуализации любого компонента - или в то время как метод любого компонента визуализации даже работает в любой точке вызова стек.

• Если вы хотите сохранить отказоустойчивую гибкость компилятора Google Closure Compiler, убедитесь, что никогда не получили доступ как свойство, которое было , указанное в виде строки. Это означает, что вы должны получить доступ, используя this.refs ['myRefString'], если ваш ref был определен как ref = "myRefString".

• Если вы не запрограммированы несколько приложений с React, ваш первый наклон, как правило, будет пытаться использовать реф «делать вещи происходят» в вашем приложении.Если это так, найдите момент и подумайте о том, где должно быть состояние в компоненте . Часто становится ясно, что правильное место для «собственного» состояния находится на более высоком уровне в иерархии. Размещение там часто устраняет любое желание использовать ссылки для «сделать вещи» - вместо этого поток данных, как правило, достигнет вашей цели.

Answer 2

refs использование вместо ref:

this.refs.accessKey.value.length