ReactJS: cannot type into input field on certain web browsers

问题

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.

回答1:

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

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

来源：https://stackoverflow.com/questions/32996597/reactjs-cannot-type-into-input-field-on-certain-web-browsers