使用 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

更新

我也试过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:

• 永远不要在任何组件的 render 方法中访问 refs——或者当任何组件的 render 方法在调用中的任何地方运行时 堆栈。

• 如果您想保留 Google Closure Compiler 高级模式的崩溃弹性，请确保永远不要将之前的内容作为属性访问 指定为字符串。这意味着您必须使用 this.refs['myRefString'] 如果你的 ref 被定义为 ref="myRefString"。

• 如果你没有用 React 编写过几个应用程序，你的第一个倾向通常是尝试使用 refs 来“制作东西” 发生”在您的应用程序中。如果是这种情况，请花点时间思考更多 关键在于组件中的状态应该在哪里拥有 通常情况下，“拥有”它的适当位置会变得很清楚。 状态在层次结构中处于较高级别。将状态放在那里 通常会消除任何使用 refs 来“让事情发生”的愿望—— 相反，数据流通常会实现您的目标。

Answer 2

使用refs 代替ref：

this.refs.accessKey.value.length