使用value属性进行渲染时，输入字段不会接收键盘事件？ [英] Input field doesn't receive keyboard events when rendering with value property?

问题描述

我正在使用react-rails gem与ReactJS for Rails配合使用。
奇怪的是，如果在渲染React组件时设置了非空值属性，则输入字段将不会收到任何键盘事件。

I am using react-rails gem to work with ReactJS for Rails. The weird thing is if I set a non-empty value property when rendering React component, the input field won't receive any keyboard event

This doesn't work!

React.DOM.input
  type: 'text'
  className: 'form-control'
  value: "ABC"

但它有效

React.DOM.input
  type: 'text'
  className: 'form-control'
  value: ""

任何想法的家伙？非常感谢！

Any idea guys? Thanks a lot!

推荐答案

我已经回答了一个与此类似的问题，我不知道如何分享该答案您。所以我重新输入。

I have answered to one question similar to this, i don't know how to share that answer to you. So i am re-typing that.

在反应中，组件渲染仅在状态改变时才显示。每当组件的状态发生变化时，相应的组件就会呈现。这意味着我们正在用新值更新虚拟DOM并将其附加到主DOM。这就是反应的作用。

In react, the component render's only when the state changes. Whenever the state of the component changes, then the corresponding component render. That means we are updating virtual DOM with new value and attach it to the main DOM. That's how react works.

对于输入文本字段，仅当用户输入某个值时，文本字段的值才会更改。在这种情况下，我们没有更新任何状态，我们正在为文本字段的value属性添加新值。所以反应不会渲染任何东西，新的值不会被添加到DOM。这里我们违反了反应行为。因此，反应不会允许我们编辑输入文本字段。

In the case of input text fields the value of the text fields changes only when the user enter some value. In this case we are not updating any state, we are adding new value to "value" property of the text field. So the react wont render anything and new value is not added to the DOM. Here we are violating react behavior. So the react wont allow us to edit the input text fields.

为了获得反应的平稳流动，它允许我们使用更改回调函数以便设置状态。在更改文本字段的值时，使用新值对set的状态进行设置，以便反应呈现，并使用新值更新DOM。

In order to the get the smooth flow of the react, it allow us to use on change call back function in-order to set the state. On changing the value of the text filed, state set's with the new value so the react render and the DOM updated with the new value.

不使用回调函数，我们可以使用valuelink属性为输入文本添加值。如：

Instead of using call back function, we can use valuelink property to add value to input text. like:

getInitialState: function(){
  return {
   value:'' //for empty text value
  }
}

对于价值链，我们必须给出状态值而不是变量值。完整的理解请参考：
https：// facebook .github.io / react / docs / two-way-binding-helpers.html

For value link, we have to give state value instead of variable value. For complete understanding please refer: https://facebook.github.io/react/docs/two-way-binding-helpers.html

只要我们在文本框中输入文本，状态就会更新并将输入文本的值设置为状态值。

whenever we enter the text in text box, the state get updated and the value of the input text set to state value.

这篇关于使用value属性进行渲染时，输入字段不会接收键盘事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！