Cách truy cập trạng thái của trẻ trong React?

Question

Tôi có cấu trúc sau:

FormEditor - giữ nhiều FieldEditor FieldEditor - chỉnh sửa một lĩnh vực hình thức và tiết kiệm giá trị khác nhau về nó ở đó là nhà nước

Khi một nút được nhấp trong vòng FormEditor, tôi muốn có thể thu thập thông tin về các trường từ tất cả các thành phần FieldEditor, thông tin ở trạng thái của chúng và có tất cả trong FormEditor.

Tôi đã xem xét lưu trữ thông tin về các trường bên ngoài trạng thái của FieldEditor và đặt trạng thái đó ở trạng thái FormEditor. Tuy nhiên, điều đó sẽ yêu cầu FormEditor để nghe từng thành phần của nó là FieldEditor khi chúng thay đổi và lưu trữ thông tin của chúng trong trạng thái của nó.

Tôi không thể chỉ truy cập trạng thái của trẻ em? Nó có lý tưởng không?

Answer 1

Nếu bạn đã có onChange handler cho từng Trình chỉnh sửa trường, tôi không thấy lý do tại sao bạn không thể di chuyển trạng thái lên thành phần FormEditor và chỉ chuyển một cuộc gọi lại từ đó sang FieldEditors sẽ cập nhật trạng thái gốc . Điều đó có vẻ giống như một cách React-y hơn để làm điều đó, với tôi.

Something dọc theo dòng này có lẽ:

var FieldEditor = React.createClass({ 
    handleChange: function(event) { 
    var text = event.target.value; 
    this.props.onChange(this.props.id, text); 
    }, 

    render: function() { 
    return (
     <div className="field-editor"> 
     <input onChange={this.handleChange} value={this.props.value}/> 
     </div> 
    ); 
    } 
}); 

var FormEditor = React.createClass({ 
    getInitialState: function() { 
    return {}; 
    }, 
    handleFieldChange: function(fieldId, value) { 
    var newState = {}; 
    newState[fieldId] = value; 

    this.setState(newState); 
    }, 

    render: function() { 
    var fields = this.props.fields.map(function(field) { 
     var props = { 
     id: field, 
     onChange: this.handleFieldChange, 
     value: this.state[field] 
     } 
     return <FieldEditor {...props} /> 
    }, this); 

    return (
     <div> 
     {fields} 
     <div>{JSON.stringify(this.state)}</div> 
     </div> 
    ); 
    } 
}); 

var App = React.createClass({ 
    render: function() { 
    var fields = ["field1", "field2", "anotherField"]; 

    return (
     <FormEditor fields={fields}/> 
    ); 
    } 
}); 


React.render(<App/>, document.body); 

http://jsbin.com/fabonujenu/8/edit

Chỉnh sửa: Thay vì đi qua các yếu tố FieldEditor như trẻ em FormEditor tôi Chỉ cần vượt qua một danh sách các fieldIds và tạo chúng trong FormEditor để thay thế. Điều này làm cho nó dễ dàng hơn để tự động thêm FieldEditors và làm cho phương thức render của FormEditor ít thắng hơn.

Answer 2

Nếu bạn muốn truy cập trạng thái con của một thành phần, bạn có thể gán một thuộc tính được gọi là ref cho mỗi đứa trẻ. Thuộc tính này nhận hàm gọi lại được chuyển qua tham chiếu đến thành phần được đính kèm. Lệnh gọi lại này được thực hiện ngay lập tức sau khi thành phần được gắn kết hoặc tháo lắp.

Ví dụ:

ES5:

<FieldEditor 
    ref={function(fieldEditor1){this.fieldEditor1 = fieldEditor1;}} 
    {...props} 
/> 

ES6:

<FieldEditor 
    ref={(fieldEditor1) => {this.fieldEditor1 = fieldEditor1;} 
    {...props} 
/> 

Trong những ví dụ các tài liệu tham khảo được lưu trữ trên các thành phần cha mẹ. Để gọi thành phần này trong mã của bạn, bạn có thể sử dụng:

this.fieldEditor1 

và sau đó sử dụng this.fieldEditor1.state để nhận trạng thái.

Một điều cần lưu ý, hãy chắc chắn thành phần con quý vị đã trả lại trước khi bạn cố gắng truy cập vào nó^_^

Nếu bạn muốn đọc thêm về Phản ứng hữu ref của, hãy kiểm tra page này từ Facebook.

Đảm bảo bạn đọc phần "Don't Overuse Refs" cho biết bạn không nên sử dụng số state của trẻ để "thực hiện mọi thứ".

Hope this helps^_^

Chỉnh sửa: Thay đổi câu trả lời cho sử dụng refs callback như trái ngược với refs chuỗi như refs chuỗi có thể sẽ được loại bỏ trong một thông cáo React.js tương lai (xem Refs and the DOM để biết thêm chi tiết).