Question

我正在创建一个包含多个输入场的React组件。我在Mac上的iPad（Safari和Chrome）和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>
        )
    }
})

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

Answer 1

您需要通过在句柄更改中设置状态来关闭更新循环。因为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。

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

1 个答案: