輸入文本框失去對鍵入React 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

首先，您應該從React.createClass轉到class PaymentDetailCard extends Component Facebook建議的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'));

這是小提琴。