प्रतिक्रिया ES6 अभिभावक बाल घटक राज्य समस्या

Question

मैं प्रतिक्रिया करने के लिए नया हूं और प्रतिक्रिया-स्टार्टर-किट के आधार पर एक सरल ToDo ऐप बनाने की कोशिश कर रहा हूं। मैं ES6 कक्षाओं का उपयोग कर रहा हूं और एक बच्चे घटक से अभिभावक राज्य को अद्यतन करने का कोई तरीका नहीं ढूंढ पा रहा हूं।

यहाँ कोड है:

import React, { PropTypes, Component } from 'react'; 
import withStyles from '../../decorators/withStyles'; 
import styles from './ToDoPage.less'; 


@withStyles(styles) 
class ToDoPage extends Component { 

    static contextTypes = { 
    onSetTitle: PropTypes.func.isRequired 
    }; 

    constructor() { 
    super(); 
    this.state = { 
     items: ['Item1', 'Item2'], 
     value: '' 
    }; 
    } 

    updateValue(newValue) { 
    //this.state is null here 
    this.setState({ 
     value: newValue 
    }); 
    } 

    clickHandler() { 
    console.log('AddToDo state:', this.state) 
    if (this.state.value && this.state.items) { //this.state is null here 
     this.setState({ 
     items: this.state.items.push(this.state.value) 
     }); 
    } 
    } 

    render() { 
    let title = 'To Do List'; 
    this.context.onSetTitle(title); 
    return (
     <div className="ToDoPage"> 
     <div className="ToDoPage-container"> 
     <h1>{title}</h1> 
      <AddToDoTextBox handleUpdate={this.updateValue}/> 
      <AddToDoButton handleClick={this.clickHandler}/> 
      <div className = "todo-items"> 
      <br/> 
      <div>({this.state.items.length}) items found.</div> 
      <ToDoList items = {this.state.items}/> 
      </div> 
     </div> 
     </div> 
    ); 
    }; 
} 

class ToDoList extends Component { 
    static propTypes = { 
    items: PropTypes.array.isRequired 
    }; 

    render() { 
    console.log(this.props.items); 
    return (
      <ul> 
      {this.props.items.map(function(item) { 
      return <li key={item}>{item}</li> 
      }) } 
      </ul>); 
    }; 
}; 

class AddToDoButton extends Component { 
    static propTypes: { 
    clickHandler: React.PropTypes.func 
    } 

    constructor() { 
    super(); 
    } 

    render() { 
    return (<button 
      className="btn btn-primary" 
      onClick={this.props.handleClick.bind(this)}>Add ToDo</button>); 
    }; 
} 

class AddToDoTextBox extends Component { 
    static propTypes: { 
    handleUpdate: React.PropTypes.func 
    } 

    constructor() { 
    super(); 
    this.state = { 
     value: '' 
    }; 
    this.handleChange = this.handleChange.bind(this); 
    } 

    handleChange(e) { 
    this.setState({value: e.target.value}); 
    this.props.handleUpdate.call(this, e.target.value); 
    } 

    render() { 
    return <input type="text" placeholder="Enter todo item here" size="50" onChange={this.handleChange}/> 
    }; 
} 
export default ToDoPage; 

मैं updateValue() और clickHandler() फ़ंक्शन से ToDoPage के राज्य का उपयोग करना चाहते हैं लेकिन this.state रिक्त है के रूप में मैं बच्चे घटकों वे से कहा जा रहा है के लिए बाध्य (यानी AddToDo बटन और AddToDoTextBox)। मैं ClickDandler() या अद्यतनValue() से ToDoPage के राज्य को कैसे एक्सेस/अपडेट कर सकता हूं?

 <AddToDoTextBox handleUpdate={this.updateValue.bind(this)}/> 
     <AddToDoButton handleClick={this.clickHandler.bind(this)}/> 

या arrow functions

का उपयोग देखें https://facebook.github.io/react/docs/reusable-components.html#no-autobinding

Answer 1

आप ToDoPage.render() में अपने handleUpdate और handleClick कार्य पर .bind(this) उपयोग करने की आवश्यकता बच्चे को प्रोप के रूप में एक समारोह पारित करने के लिए। (कुछ ES7 वाक्य रचना के साथ उदाहरण) की तरह कुछ:

जनक घटक

import React, { Component } from 'react' 

export default class Parent extends Component { 
    constructor() { 
    super(); 

    this.handleChange = this.handleChange.bind(this); 
    this.state = { 
     number: 1 
    }; 
    } 

    handleChange(num) { 
    this.setState({ 
     number: num 
    }); 
    } 

    render() { 
    return (
     <Child changeNumber={this.handleChange} /> 
    ); 
    } 
} 

बाल घटक

import React, { PropTypes, Component } from 'react' 

export default class Child extends Component { 
    static propTypes = { 
    changeNumber: PropTypes.func 
    } 

    constructor() { 
    super(); 

    this.handleClick = this.handleClick.bind(this); 
    } 

    handleClick(e) { 
    e.preventDefault(); 
    this.props.changeNumber(e.target.value); 
    } 

    render() { 
    return (
     <button onClick={this.handleClick}> 3 </button> 
    ); 
    } 
} 

Answer 2

आप बाल से अभिभावकीय आप की जरूरत करने के लिए परिवर्तन करना चाहते हैं जब: