輸入文本框丟失焦點輸入反應js

Question

輸入文本框在輸入時失去焦點。這是一段代碼。不能明白問題在哪裏。以下內容不是完整的代碼，但它有點像這樣。能否請你告訴我在哪裏，我在做錯誤

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

首先，你應該爲Facebook建議

其次擺脫React.createClass到class PaymentDetailCard extends Component語法，你的問題是，你是沒有約束力的change功能到你的班級，因此在變更時，this指向input，而不是班級本身。當您打開控制檯時，您可能會看到某種錯誤，因爲在此輸入上調用setState而不是類。

此外，關於你的代碼另一條評論 - 你不應該使用componentDidMount初始化狀態 - 移動card: this.props.card到getInitialState

Answer 2

您需要將onChange綁定事件。像這樣的東西應該工作：

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.