Phản ứng Mẫu Component onSubmit Handler không làm việc

Question

Tôi đã sau Phản ứng thành phần:

class Form extends React.Component { 
    handleSubmit(e) { 
    e.preventDefault(); 

    let loginInput = ReactDOM.findDOMNode(this.refs.login); 

    // change Main component's state 
    this.props.addCard(loginInput.value); 

    // reset the form 
    loginInput.value = ''; 
    } 

    render() { 
    return(
     <form onSubmit={this.handleSubmit}> 
     <input placeholder="githug login" ref="login" /> 
     <button>Add Login</button> 
     </form> 
    ); 
    } 
} 

Như bạn thấy, tôi muốn các chức năng handleSubmit được gọi bất cứ khi nào biểu mẫu được gửi. Tôi đã chỉ ra điều này bằng cách thêm hàm vào trình xử lý onSubmit.

Chức năng đang được gọi vào đúng thời điểm. Tuy nhiên, giá trị của this trong hàm đó là null. Điều này là đáng ngạc nhiên đối với tôi, như tôi mong đợi giá trị của this là thành phần React. Thực tế là this là null là đáng ngạc nhiên với tôi, bởi vì tôi đang sử dụng một logic rất giống nhau/mã như đề nghị của official React documentation.

Tôi sẽ đánh giá cao sự trợ giúp trong việc tìm ra lý do tại sao this không phải là thành phần React, như mong đợi và cách sửa mã đó.

Answer 1

Khi bạn sử dụng React với ES2015 classes bạn nên đặt this để xử lý sự kiện

class Form extends React.Component { 
    constructor(props) { 
    super(props); 
    this.handleSubmit = this.handleSubmit.bind(this); 
    }  

    handleSubmit(e) { 
    e.preventDefault(); 

    let loginInput = this.refs.login; 
    this.props.addCard(loginInput.value); 
    loginInput.value = ''; 
    } 

    render() { 
    return(
     <form onSubmit={ this.handleSubmit }> 
     <input placeholder="githug login" ref="login" /> 
     <button>Add Login</button> 
     </form> 
    ); 
    } 
} 

Example

No Autobinding

Phương pháp theo ngữ nghĩa tương tự như lớp ES6 thường xuyên, có nghĩa là họ không tự động liên kết điều này với cá thể. Bạn sẽ phải sử dụng rõ ràng .bind (this) hoặc arrow functions =>.