ReactJS：无法在某些 Web 浏览器上输入输入字段答案

【问题标题】：ReactJS: cannot type into input field on certain web browsersReactJS：无法在某些 Web 浏览器上输入输入字段
【发布时间】：2016-01-04 22:37:33
【问题描述】：

我正在创建一个包含多个输入字段的 React 组件。我在 iPad（Safari 和 Chrome）和 Mac 上的 Safari 浏览器上遇到了问题。

我无法输入输入字段。

var InputComponent = React.createClass({
    getInitialState : function(){
        return {telephone : ''}
    },
    handleChange : function(event){
        console.log(event.target.value);
    },
    render : function(){
        return( 
              <div>
                    <label>Contact tel </label>
                    <input id="telephone" onChange={this.handleChange} defaultValue={this.state.telephone}/>
              </div>
        )
    }
})

我在输入元素本身上尝试了几种变体，但没有任何运气。

【问题讨论】：

你想用什么作为值？将值设置为value={this.state.telephone} 并使用setState 更新handleChange 中的电话？
@Glitch100 感谢您的快速回复。我实际上更新了代码示例。您的建议效果很好.. 但是我在上面提到的浏览器中仍然遇到问题。
我发现这个问题可能与创建 React 组件以外的因素有关。可能是 CSS 规则的问题......或其他一些库......谢谢大家的帮助。
一切都好，祝你未来的反应开发好运
我设置了 -webkit-user-select: none;到整个文档。

标签： javascript cross-browser reactjs

【解决方案1】：

您需要通过在句柄更改中设置您的状态来关闭更新循环。因为 react 维护它自己的虚拟 DOM，所以你希望 react 是对你的 DOM 进行更改，而不是标准浏览器。

var InputComponent = React.createClass({
   getInitialState : function(){
       return {telephone : ''}
   },
   handleChange : function(event){
       this.setState({
           telephone: event.target.value
       })
   },
   render : function(){

       return( 
            <div>
                <label>Contact tel </label>
                <input id="telephone" onChange={this.handleChange} value={this.state.telephone}/>
            </div>
         )
   }
})

另外，我认为你想使用 value 属性，而不是 defaultValue。

【讨论】：

我仍然遇到与您的代码有关的浏览器问题。但除此之外，您的代码确实有效。