React.js में बाल घटकों पर क्लिक ईवेंट को कैसे प्रबंधित करें, क्या कोई प्रतिक्रिया "रास्ता" है?

Question

मैं ऐसे विजेट को बनाने/प्रोटोटाइप करने का प्रयास कर रहा हूं जिसमें एक खोज फ़िल्टर और 2-पैनल हैं जिनमें कुंजी-मूल्य/अभिभावक-बाल संबंध हैं। दाएं पैनल में श्रेणियां हैं, बाएं पैनल में रुचि है जो एक व्यक्तिगत श्रेणी से जुड़े हैं। श्रेणी पंक्तियां संबंधित ब्याज चेकबॉक्स दिखाने के लिए चयन योग्य हैं। मुझे यह समझने की कोशिश करने की बात नहीं मिली है कि चेकबॉक्स के साथ फॉर्म सबमिशन को कैसे अपडेट किया जाए, सबसे पहले मुझे डेटा प्रवाह करने के सही तरीके के बारे में अधिक समझने की आवश्यकता है।

यह प्रतिक्रिया में मेरा पहला प्रयास है और मुझे पता है कि प्रतिक्रिया एक तरफा डेटा प्रवाह को प्रोत्साहित करती है। मुझे लगता है कि मैं घटनाओं को संभालने के लिए jQuery का उपयोग कर गलत तरीके से रुचियों को अद्यतन कर रहा हूं। मैं रुचियों के पैनल को अपडेट करने के कुछ वैकल्पिक तरीकों को जानना चाहता हूं।

मैंने जो पढ़ा है, उससे माता-पिता को अपडेट करने के लिए (मुझे विश्वास है कि इसे रिएक्ट डॉक्स में मालिक के रूप में संदर्भित किया जाता है) घटक आपको बच्चे/स्वामित्व वाले घटकों पर कॉलबैक परिभाषित करने की आवश्यकता होती है। मैं इसके बारे में एक स्पष्टीकरण की सराहना करता हूं और यदि मैं गलत रूप से राज्य बनाम प्रोप में रूचि का उपयोग कर रहा हूं। मैं केवल खोज फ़िल्टर & के लिए प्रयास कर रहा था, चेकबॉक्स विजेट के लिए राज्य का हिस्सा बनें, क्योंकि मैंने पढ़ा है कि फ़िल्टर करने योग्य डेटा प्रोप में होना चाहिए।

अद्यतन: मैंने getDefaultProps में प्रारंभ करने के लिए रुचियों को बदल दिया, इसलिए अब मैं उन्हें प्रोप के रूप में उपयोग कर रहा हूं। मुझे लगता है कि यह अधिक सही तरीका है, क्या मैं सही हूँ? मैंने हैंडल CategoryRowClick फ़ंक्शन को बदलकर रुचियों को अपडेट करने के तरीके को भी बदल दिया है। मुझे लगता है कि मैं चीजों को और अधिक सही तरीके से कर रहा हूं, लेकिन फिर भी किसी भी सलाह से प्यार होगा कि प्रतिक्रिया का उपयोग करके अधिक अनुभव वाले किसी भी व्यक्ति को धन्यवाद, धन्यवाद।

किसी भी मदद की सराहना की जाएगी!

/** @jsx React.DOM */ 

var InterestRow = React.createClass({ 
    render: function() { 
     return (
      <div> 
       <label>{this.props.interest.name}</label> 
       <input type="checkbox" ref={this.props.key} value={this.props.key} /> 
      </div> 
     ) 
    } 
}); 

var InterestPanel = React.createClass({ 
    var interestPanel = this; 
    var rows = []; 

    render: function() { 
     var rows = []; 
     var i = 0; 

     _(this.props.interests).each(function (interest) { 
      rows.push(<InterestRow interest={interest} key={interest.value} />); 
     }); 

     return (
      <form>{rows}</form> 
     ) 
    } 
}); 

var CategoryRow = React.createClass({ 
    render: function() { 
     return (
      <li onClick={this.props.handleClick.bind(null, this.props.interests)}>{this.props.category}</li> 
     ) 
    } 
}); 

var CategoriesPanel = React.createClass({ 
render: function() { 
    var categoriesPanel = this; 
    var rows = []; 
    var categories = []; 
    var interests = []; 
    var interestSet = []; 
    var missedSet = []; 
    var lastCategory = null; 
    var category; 
    var interest; 
    var i = 0; 

    _.each(categoriesPanel.props.data, function (datum) { 
     name = datum.name; 
     value = datum.targeting_value; 
     category = name.split('/')[0]; 
     interest = {name: name.split('/')[1], value: value} 

     if (_.contains(interest.name.toLowerCase(), categoriesPanel.props.searchText.toLowerCase())) { 
      if (category !== lastCategory) { 
       if (interestSet.length > 0) { 
        interests.push(interestSet.concat(missedSet)); 
       } 

       lastCategory = category; 
       categories.push(category); 
       interestSet = []; 
       interestSet.push(interest); 
       missedSet = []; 
      } else { 
       if (!_.contains(categories, category)) { 
        categories.push(category); 
        interestSet.push(interest); 
       } else { 
        interestSet.push(interest); 
       } 
      } 
     } else { 
      if (category !== lastCategory) { 
       if (interestSet.length > 0) { 
        interests.push(interestSet.concat(missedSet)); 
       } 

       lastCategory = category; 
       interestSet = []; 
       missedSet = []; 
       missedSet.push(interest); 
      } else { 
       missedSet.push(interest); 
      } 
     } 
    }); 

    if (interestSet.length > 0) { 
     interests.push(interestSet.concat(missedSet)); 
    } 

    var interestsObject = _.zipObject(categories, interests); 

    _.each(interestsObject, function (interestSet, category) { 
     i++; 
     rows.push(<CategoryRow category={category} key={i} interests={interestSet} handleClick={categoriesPanel.props.handleClick} />) 
    }); 

    return (
     <div> 
      <ul>{rows}</ul> 
     </div> 
    ) 
} 
}); 

var SearchBar = React.createClass({ 
    handleChange: function() { 
     this.props.onUserInput(
      this.refs.searchTextInput.getDOMNode().value 
     ) 
    }, 
    render: function() { 
     return (
      <form onSubmit={this.handleSubmit}> 
       <input 
        type="text" 
        placeholder="Search Interests..." 
        value={this.props.searchText} 
        ref="searchTextInput" 
        onChange={this.handleChange} 
       /> 
      </form> 
     ); 
    } 
}); 

var InterestsTable = React.createClass({ 
loadDataFromTwitter: function() { 
    $.ajax({ 
     url: this.props.url, 
     dataType: 'json', 
     success: function(data) { 
      this.setProps({data: data}); 
     }.bind(this) 
    }); 
}, 
getInitialState: function() { 
    return { 
     searchText: '' 
    } 
}, 
getDefaultProps: function() { 
    return { 
     data: [], 
     interests: [] 
    } 
}, 
componentWillMount: function() { 
    this.loadDataFromTwitter(); 
}, 
handleUserInput: function(searchText) { 
    this.setState({ 
     searchText: searchText 
    }); 
}, 
handleCategoryRowClick: function(interests) { 
    this.setProps({ 
     interests: interests 
    }); 
}, 
render: function() { 
    return (
     <div> 
      <SearchBar 
       searchText={this.state.searchText} 
       onUserInput={this.handleUserInput} 
      /> 
      <CategoriesPanel 
       data={this.props.data} 
       searchText={this.state.searchText} 
       handleClick={this.handleCategoryRowClick} 
      /> 
      <InterestsPanel 
       interests={this.props.interests} 
       searchText={this.state.searchText} 
      /> 
     </div> 
    ); 
} 
}); 

React.renderComponent(
    <InterestsTable url="/api/interests" />, 
    document.getElementById('content') 
); 

Answer 1

• वहाँ कुछ सुस्त jQuery कि हटाया जा सकता है: अक्सर के रूप में संभव के रूप में

componentDidMount: function() { 
     $(document).on("handleCategoryRowClick", this.handleCategoryRowClick); 
    }, 

• उपचार props के रूप में अपरिवर्तनीय और जीवन प्रतिक्रिया चक्र तरीकों अपेक्षा के अनुरूप काम करेंगे। इस मामले में, interests props के बजाय InterestsTable घटक का स्वामी होना चाहिए और इसे संशोधित करना चाहिए; उस में घटक के माता-पिता द्वारा पारित नहीं:

getInitialState: function() { 
     return { 
     interests: [], 
     searchText: "" 
     }; 
    }, 
    handleCategoryRowClick: function(e, interests) { 
     this.setState({ 
     interests: interests 
     }); 
    },