ReactJS：无法在某些Web浏览器上输入字段 [英] ReactJS: cannot type into input field on certain web browsers

问题描述

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

I am creating a React component which includes several input feilds. I have encountered an issue on the iPad(Safari and Chrome) and Safari browser on Mac.

我无法在输入栏上输入内容。

I cannot type into the Input feilds.

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

我已经尝试了输入元素本身的几种变体而没有运气。

I have tried several variations on the input element itself without any luck.

推荐答案

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

You need to close the update loop by setting your state in the handle change. Because react maintains its own virtual DOM, you want react to be making your DOM changes, not the standard browser.

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

此外，我认为您想使用值道具，而不是 defaultValue 。

Also, I think you want to use the value prop, rather than defaultValue.

这篇关于ReactJS：无法在某些Web浏览器上输入字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！