Javascript 使用ReactJs从元素访问输入值

如何检查输入字段是否包含其他元素的值。我的尝试

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

更新

这次我还尝试了

this.refs.accessKey.value.length

得到以下错误

Uncaught TypeError: Cannot read property 'value' of undefined

---

请帮我排序。

不建议直接访问

ref

对同一组件进行更改。此外，由于您正在使用react，因此需要使用

this.state

作为旁注，您应该使用

类名

下面是使用React State更新的代码

HTML

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

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

var Hello=React.createClass({
getInitialState:函数（）{
返回{值：''}；
},
handleChange:函数（事件）{
this.setState（{value:event.target.value}）；
},
render:function（）{
var toggled=this.state.value.length？'toggled'：''；
返回(
访问密钥
);
}
});
ReactDOM.render(
,
document.getElementById（'容器'）
);

小提琴

---

:

• 永远不要访问任何组件的渲染方法内部的引用–或者当任何组件的渲染方法在调用中的任何位置运行时 堆叠。

• 如果您想保留Google Closure编译器的高级模式，请确保永远不要将其作为属性访问 指定为字符串。这意味着您必须使用 如果您的ref被定义为ref=“myRefString”，则此.refs['myRefString']

• 如果您没有使用React编写多个应用程序，您的第一个倾向通常是尝试使用REF来“制作东西” 在你的应用程序中“发生”。如果是这样的话，花点时间多想想 批判性地讨论在组件中应该在何处拥有状态 层次结构。通常情况下，很明显，要“拥有”这个 状态在层次结构中处于较高级别。把国家放在那里 通常消除了使用REF“使事情发生”的欲望- 相反，数据流通常会实现您的目标

---

不建议直接访问

ref

对同一组件进行更改。此外，由于您正在使用react，因此需要使用

this.state

作为旁注，您应该使用

类名

下面是使用React State更新的代码

HTML

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

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

var Hello=React.createClass({
getInitialState:函数（）{
返回{值：''}；
},
handleChange:函数（事件）{
this.setState（{value:event.target.value}）；
},
render:function（）{
var toggled=this.state.value.length？'toggled'：''；
返回(
访问密钥
);
}
});
ReactDOM.render(
,
document.getElementById（'容器'）
);

小提琴

---

:

• 永远不要访问任何组件的渲染方法内部的引用–或者当任何组件的渲染方法在调用中的任何位置运行时 堆叠。

• 如果您想保留Google Closure编译器的高级模式，请确保永远不要将其作为属性访问 指定为字符串。这意味着您必须使用 如果您的ref被定义为ref=“myRefString”，则此.refs['myRefString']

• 如果您没有使用React编写多个应用程序，您的第一个倾向通常是尝试使用REF来“制作东西” 在你的应用程序中“发生”。如果是这样的话，花点时间多想想 批判性地讨论在组件中应该在何处拥有状态 层次结构。通常情况下，很明显，要“拥有”这个 状态在层次结构中处于较高级别。把国家放在那里 通常消除了使用REF“使事情发生”的欲望- 相反，数据流通常会实现您的目标

---

使用

ref

代替

ref

：

this.refs.accessKey.value.length

---

使用

ref

代替

ref

：

this.refs.accessKey.value.length

---

谢谢你的回答。“裁判”也不走运。请检查我上面的更新。@正文，但建议您不要使用refs！谢谢你的回答。“裁判”也不走运。请检查我上面的更新。@正文，但建议您不要使用refs！谢谢你的回答。“裁判”也不走运。请检查我上面的更新。谢谢你的回答。“裁判”也不走运。请检查我上面的更新。