Làm cách nào để 'đặt lại' một phần tử ReactJS?

Question

Tôi đang cố gắng 'đặt lại' phần tử ReactJS.

Trong trường hợp này, phần tử là 90% + nội dung của trang.

Tôi đang sử dụng replaceState để thay thế trạng thái của phần tử với trạng thái ban đầu.

Thật không may, các phần tử con có trạng thái 'riêng' không được đặt lại. Đặc biệt, các trường biểu mẫu giữ nội dung của chúng.

Có cách nào buộc buộc trả lại phần tử hay không, điều này cũng sẽ làm cho các phần tử phụ hiển thị lại, như thể trang vừa tải?

Answer 1

Thêm key vào phần tử buộc phần tử (và tất cả các phần tử con) được hiển thị lại khi khóa đó thay đổi.

(Tôi thiết lập giá trị của 'chìa khóa' để chỉ đơn giản là dấu thời gian khi các dữ liệu ban đầu đã được gửi.)

render: function() { 
    return (
    <div key={this.state.timestamp} className="Commissioning"> 
     ... 

Answer 2

Trong khi tôi không cá nhân tôi nghĩ bạn nên lưu trữ địa phương, tiểu bang thành phần tạm thời (như các hộp đầu vào đang tiến hành) ở một vị trí tập trung (như một cửa sổ thông lượng) trong hầu hết các trường hợp, ở đây có thể có ý nghĩa, tùy thuộc vào số lượng bạn có, đặc biệt vì nó giống như các đầu vào đã có một số tương tác máy chủ/xác thực xung quanh chúng. Đẩy trạng thái đó lên cấu trúc phân cấp thành phần hoặc vào một số vị trí trung tâm khác có thể giúp ích rất nhiều trong trường hợp này.

Một ý tưởng thay thế ngoài đỉnh đầu của tôi là sử dụng mixin trong các thành phần có thể cần đặt lại trạng thái cục bộ và thực hiện một số loại kích hoạt sự kiện, v.v. Ví dụ, bạn có thể sử dụng Node của EventEmitter hoặc một thư viện như EventEmitter3 với một mixin như thế này (cảnh báo: không kiểm tra, có lẽ tốt nhất này là giả :)

var myEmitter = new EventEmitter(); // or whatever 

var ResetStateMixin = { 
    componentWillMount: function() { 
    myEmitter.on("reset", this._resetState); 
    }, 

    componentWillUnmount: function() { 
    myEmitter.off("reset", this._resetState); 
    }, 

    _resetState: function() { 
    this.replaceState(this.getInitialState()); 
    }, 

    triggerReset: function() { 
    myEmitter.emit("reset"); 
    } 
}; 

Sau đó, bạn có thể sử dụng nó trong các thành phần như sau:

React.createClass({ 
    mixins: [ResetStateMixin], 

    getInitialState: function() { 
    return { ... }; 
    }, 

    onResetEverything: function() { 
    // Call this to reset every "resettable" component 
    this.triggerReset(); 
    } 
}); 

này là rất cơ bản và khá nặng tay (bạn chỉ có thể đặt lại tất cả các thành phần, mỗi thành phần gọi replaceState(this.getInitialState()), vv) nhưng những vấn đề có thể được giải quyết bằng cách mở rộng một chút (ví dụ như có nhiều bộ phát sự kiện, cho phép thành phần mixin -specific resetState triển khai, v.v.).

Cần lưu ý rằng bạn do phải sử dụng các đầu vào được kiểm soát để tính năng này hoạt động; trong khi bạn không cần phải đẩy trạng thái của bạn lên tất cả các phân cấp thành phần, bạn vẫn muốn tất cả các đầu vào của mình có các trình xử lý value và onChange (v.v).

Answer 3

Phương pháp this.replaceState(this.getInitialState()) không thực sự đặt lại trẻ em là đầu vào, nếu đó là những gì bạn đang tìm kiếm. Đối với bất kỳ ai muốn chỉ cần đặt lại các trường biểu mẫu của mình, có chức năng DOM reset() tiêu chuẩn sẽ xóa tất cả các yếu tố đầu vào trong một phần tử đã cho.

Vì vậy, với phản ứng, nó muốn được một cái gì đó như thế này:

this.refs.someForm.getDOMNode().reset(); 

Doumentation:

https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reset

Answer 4

Nếu nó là một hình thức mà bạn muốn thiết lập lại, bạn chỉ có thể sử dụng

này

// assuming you've given {ref: 'form'} to your form element 
React.findDOMNode(this.refs.form).reset();