1

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

这不行！

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

但它有效

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

有什么想法吗？非常感谢！

4

1 回答 1

2

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

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

在输入文本字段的情况下，文本字段的值仅在用户输入某个值时才会改变。在这种情况下，我们不会更新任何状态，而是向文本字段的“值”属性添加新值。所以反应不会渲染任何东西，新值也不会添加到 DOM 中。在这里，我们违反了反应行为。所以反应不允许我们编辑输入文本字段。

为了获得反应的顺畅流动，它允许我们使用 on change 回调函数来设置状态。在更改文本字段的值时，状态设置为新值，因此反应渲染和 DOM 更新为新值。

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

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

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

每当我们在文本框中输入文本时，状态都会更新，输入文本的值会设置为状态值。

于 2016-04-26T17:07:30.920 回答