Reaguj nadrzędne elementy potomne ES6 Referencje

Question

Jestem nowy, aby zareagować i próbować zbudować prostą aplikację do pracy w oparciu o zestaw startowy-reagowania. Używam klas ES6 i nie mogę znaleźć sposobu na zaktualizowanie stanu nadrzędnego z komponentu potomnego.

Oto kod:

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; 

Chcę uzyskać dostęp do stanu ToDoPage jest od updateValue() i clickHandler() funkcji, ale this.state jest null jak wiązanie się elementów podrzędnych są one wywoływane z (tj. AddToDoButton i AddToDoTextBox). Jak mogę uzyskać dostęp/aktualizować stan ToDoPage z clickHandler() lub updateValue()?

Answer 1

Trzeba użyć .bind(this) na swoim handleUpdate i handleClick zadań w ToDoPage.render():

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

lub użyj arrow functions

Zobacz https://facebook.github.io/react/docs/reusable-components.html#no-autobinding

Answer 2

Kiedy chcesz zrobić zmianę od dziecka do Dominującą trzeba przekazać funkcję Dziecku jako rekwizytowi. Coś podobnego (przykład z niektórych składni ES7):

składnik nadrzędny

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} /> 
    ); 
    } 
} 

komponent Dziecko

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> 
    ); 
    } 
}