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

更新

我这次尝试this.refs.accessKey.value.length时遇到了以下错误

Uncaught TypeError: Cannot read property 'value' of undefined

请帮我解释一下。

Answer 1

不建议直接访问ref以在同一组件中进行更改。此外，由于您正在使用react，因此您需要使用this.state。

作为旁注，您应该使用npm package classNames

以下是使用React State的更新代码。

<强> 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')
);

<强>小提琴

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

Official Notes and References：

永远不要访问任何组件的渲染方法中的引用 - 或者任何组件的渲染方法甚至在通话中的任何位置运行   叠加。



如果您想保留Google Closure Compiler高级模式压缩弹性，请务必永远不要将其作为属性进行访问   指定为字符串。这意味着您必须使用   this.refs [＆＃39; myRefString＆＃39;]如果您的参考被定义为ref =＆＃34; myRefString＆＃34;。



如果您还没有使用React编写多个应用程序，那么您的第一个倾向通常是尝试使用refs来制作东西   发生＆＃34;在你的应用程序中如果是这种情况，请花一点时间思考更多   批判性的关于组件中应该拥有哪个州   层次结构。通常，很明显，适当的地方是拥有＆＃34;那   state在层次结构中处于更高级别。把国家放在那里   通常会消除任何使用refs以使事情发生的愿望。 -   相反，数据流通常会实现您的目标。

Answer 2

使用refs代替ref：

this.refs.accessKey.value.length

使用ReactJs

2 个答案: