React ES6 phụ huynh thành phần tiểu bang vấn đề

Question

Tôi mới để phản ứng và cố gắng xây dựng một ứng dụng ToDo đơn giản dựa trên bộ phản ứng-starter-kit. Tôi đang sử dụng các lớp ES6 và không thể tìm cách cập nhật trạng thái gốc từ một thành phần con.

Đây là mã:

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; 

tôi muốn truy cập trạng thái ToDoPage từ chức năng updateValue() và clickHandler() nhưng this.state là null như tôi liên kết với các thành phần con họ đang được gọi là từ (tức là AddToDoButton và AddToDoTextBox). Làm thế nào tôi có thể truy cập/cập nhật trạng thái của ToDoPage từ clickHandler() hoặc updateValue()?

Answer 1

Bạn cần phải sử dụng .bind(this) tại handleUpdate và handleClick bạn bài tập trong ToDoPage.render():

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

hoặc sử dụng arrow functions

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

Answer 2

Khi bạn muốn làm thay đổi từ trẻ em cho Phụ Huynh bạn cần để chuyển một hàm cho Child dưới dạng prop. Một cái gì đó tương tự (ví dụ với một số cú pháp ES7):

thành phần Chánh

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

phần Child

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