Question

我是新手，想要根据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为null，因为我绑定了它们被调用的子组件（即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>
    );
  }
}

Answer 2

您需要在.bind(this)的{{1}}和handleUpdate作业中使用handleClick：

ToDoPage.render()

或使用avcodec_open2

请参阅arrow functions

React ES6父子组件状态问题

2 个答案: