javascript - React ES6 父子组件状态问题

Question

我是 React 的新手，正在尝试基于 react-starter-kit 构建一个简单的 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 为空，因为我绑定(bind)到它们被调用的子组件(即 AddToDoButton 和 AddToDoTextBox)。如何从 clickHandler() 或 updateValue() 访问/更新 ToDoPage 的状态？

Answer 1

当你想要从 Child 更改为 Parent 时，你需要将一个函数作为 prop 传递给 Child。类似的东西(一些 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>
    );
  }
}