入力テキストボックスの入力にフォーカスを失う反応するjs

Question

入力中に入力中にフォーカスが失われています。ここにコードがあります。カントはどこに問題があるのか​​理解する。以下はコード全体ではありませんが、これはやや似ています。あなたはchange機能を結合していないことをFacebookが第二

を示唆するように、私は間違いすべての

var PaymentDetailCard = React.createClass({ 
    getInitialState: function() { 
     return { 
      card: { 
         number: "", 
        userName: "", 
        dateWon: "", 
        prepayDue:"", 
        prepayApplied: "", 

        }, 
      } 
    },componentDidMount: function() { 
     this.setState({ card: this.props.card }); 
    }, 

    getPrepayAppliedInput:function(){ 
     var input; 
      input = 
      <input 
       type="text" 
       id="prepayAppliedCard" 
       value={this.state.card.prepayApplied} 
       onChange={this.change} maxLength ="10" 
     />; 
     return( 
      <div><span>$</span>{input}</div> 
      ) 
    }, 
    change:function(event){ 
      this.setState({prepayApplied: event.target.value}); 
      PaymentActions.sendRowNum(this.props.rownum); 
      {this.props.onPrepayAppliedChange(event)}; 
    }, 
    getUniqueID: function() { 
     return Math.random().toString(36).substring(7); 
    }, 
render: function() { 
return (<div>{this.getPrepayAppliedInput()} </div> 
) 
    } 
}); 

Answer 1

ファーストを作っていますどこで教えてくださいすることができ、あなたがReact.createClassからclass PaymentDetailCard extends Component構文に移動する必要があり、あなたの問題がありますあなたのクラスに変更された場合、thisはクラスそのものではなく、inputを指します。あなたのコンソールを開くと、クラスの代わりにこの入力にsetStateを呼び出すため、おそらく何らかのエラーが発生します。

また、あなたのコードについては別のコメント - あなたは状態を初期化するためにcomponentDidMountを使用しないでください - あなたは、あなたのonChangeイベントをバインドする必要がcard: this.props.card

Answer 2

getInitialStateに移動します。このような何か作業をする必要があります：

class PaymentDetailCard extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      card: { 
       number: "", 
       userName: "", 
       dateWon: "", 
       prepayDue: "", 
       prepayApplied: "" 
      } 
     } 
    } 

    componentDidMount() { 
     this.setState({card: this.props.card}); 
    } 


    getPrepayAppliedInput() { 
     let input = <input 
         type="text" 
         id="prepayAppliedCard" 
         value={this.state.card.prepayApplied} 
         onChange={this.change.bind(this)} maxLength="10"/>; 

     return <div><span>$</span>{input}</div> 
    } 

    change(event) { 
     this.setState({prepayApplied: event.target.value}); 
     PaymentActions.sendRowNum(this.props.rownum); 
     {this.props.onPrepayAppliedChange(event)} 
    } 


    getUniqueID() { 
     return Math.random().toString(36).substring(7); 
    } 

    render() { 
     return (
      <div>{this.getPrepayAppliedInput()} </div> 
     ) 
    } 
} 

React.render(<PaymentDetailCard />, document.getElementById('container')); 

Here is the fiddle.