react_Kons

03 what's your name!

var test = (<div>
<p>Hey there. Enter your name.</p>
 <input type="text" name="name" onChange={this.onNameChange} />
    </div>);
    if(this.state.name.length === 0)
      return test;
    else{
      return (
        <div>
          <p>Hello {this.state.name}</p>
          <input type="text" name="name" onChange={this.onNameChange} />
        </div>
      );
    }

---

05 GroceryList 01

Properties are a way to pass parameters to your React components.Properties are to React components what attributes are to HTML elements.

state　更像是把值赋给一个组件，通常初始一个state，然后父组件像这样子<component test={this.state.xx} key={index}/> 然后子组件就可以return(<p key={this.props.key}>{this.props.test.xx}</p> )渲染了，就基本是这个套路。

class GroceryList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      groceries: [ { name: "Apples" } ]
    };
  }
  render() {
    let groceriesComponents = [];
    // Properties are a way to pass parameters to your React components.
    // We mentioned this in the third exercise. Properties are to React
    // components what attributes are to HTML elements.
    //
    // Below you can see how to pass properties to child components.
    // We have defined a `grocery` property for each `GroceryListItem`.
    for(var index = 0; index < this.state.groceries.length; index++) {
      groceriesComponents.push(
          <GroceryListItem
            grocery={this.state.groceries[index]}
            key={index}
          />
      );
    }
    // Hint: Don't forget about putting items into `ul`
    return (
      <div>
        // Put your code here
        <ul>
         {groceriesComponents}
        </ul>
      </div>
    );
  }
}
// Render grocery name from component's properties.
// If you have a problem, check `this.props` in the console.
class GroceryListItem extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
          // Put your code here.
         return(
            <li key={this.props.key}>{this.props.grocery.name}</li>
          )
  }
}

---

05 GroceryList 02

通过这个练习基本熟悉了state的用法，首先state一般用于设置初始值，然后通过setState({key:val})设置，注意，这里只要一使用setState就会触发重新渲染render()方法，然后在后续组件中想办法使之改变。
(遇到问题想办法解决，一步一步来，注意看浏览器报错.使用console.log来打印每一步的状态)

var React = require("react");
// We continue our journey with reactive grocery list. We implemented the previous
// task ourselves. You can see our example implementation.
//
// Task: You have to implement adding items to the list. Create the implementation
//       of the `addGroceryItem` method. This method should modify the `GroceryList`
//       component's state and by that re-render this component.
//
//       You need to render an input and button in `GroceryList` (after the
//       groceries list). Users will use them as an input for new groceries.
//
//       We prepared two components for you. Please render the button and
//       input under your list and define the `onClick` handler for the button.
//
//       Hint: See `render` method body. Look for `newProductInput` and
//             `newProductAddButton` variables
//
//       Do you remember how we used `onChange` event in the third exercise?

 // 问题１　到底是拼接之后还是替换　
 //  问题２　先实现改变就回显的功能,现在是只要光标以改变就会重新setState

class GroceryList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      groceries: [
        { name: "Apples" }
      ],
      newGroceryName: ""
    };
//  这里的bind　是几个意思？？
    this.addGroceryItem = this.addGroceryItem.bind(this);
    this.inputChanged = this.inputChanged.bind(this);
  }
  // Warning: You shouldn't change this method
  inputChanged(event) {
    this.setState({newGroceryName: event.target.value});
  }
  // Fill the definition of the following method to allow adding new items to the list
  // Hint #1: You should use the `concat` function to modify groceries list.
  // Hint #2: Remember about the case where input is empty.
  // Hint #3: Name of the new grocery item will be stored in `this.state.newGroceryName`.
  addGroceryItem() {
    // Put your code here
     //console.log(this.state);
     if(this.state.newGroceryName){
    var groceriesVal= this.state.groceries.concat({'name':this.state.newGroceryName});
  this.setState({groceries:groceriesVal})
}
  }
  render() {

    let groceriesComponents = [],
        newProductInput,
        newProductAddButton;

    for(var index = 0; index < this.state.groceries.length; index++) {
      groceriesComponents.push(
          <GroceryListItem
            grocery={this.state.groceries[index]}
          />
      );
    }
    // Here are components for task #2.
    newProductInput = <input className='new-item' type="text" onChange={this.inputChanged}/>;
    // Something is missing here... Will anything happen if you click this button now?
    newProductAddButton = <button className='add-product' onClick={this.addGroceryItem}>Add new Product</button>;
    return (
      <div>
        <ul>
          {groceriesComponents}
          {newProductInput}
          {newProductAddButton}
        </ul>
      </div>
    );
  }
}
class GroceryListItem extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (<li>{this.props.grocery.name}</li>);
  }
}
export default GroceryList;

---

todolist

任务相当于做一个类似于todolist的东西，点击改变样式.
思路是给每个li绑定点击事件，然后反转这个li下的complete属性，最后自然是setState。难点是可能没有想到给每个item 加index 导致无法绑定。多思考，多看提示会少踩坑
(这段代码没有写出来，主要原因是因为不理解bind方法，然后没有理解传参那一步。)

class GroceryList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      groceries: [
        {
          name: "Apples",
          completed: false
        }
      ],
      newGroceryName: ""
    };

    this.addGroceryItem = this.addGroceryItem.bind(this);
    this.clearList = this.clearList.bind(this);
    this.inputChanged = this.inputChanged.bind(this);
  }

  inputChanged(event) {
    this.setState({ newGroceryName: event.target.value });
  }

  addGroceryItem() {
    if(this.state.newGroceryName) {
      let newGroceryItem = { name: this.state.newGroceryName };
      this.setState({
        groceries: this.state.groceries.concat([newGroceryItem])
      });
    }
  }

  clearList(event) {
    this.setState({groceries: []});
  }

  // Fill the definition of the following method to allow completing each item
  // Hint 1: Pay attention to the element's index on the list.
  toggleGroceryCompleteness(groceryIndex) {
    var groceryCompleted = this.state.groceries[groceryIndex].completed;

    var grocery = this.state.groceries[groceryIndex];
    grocery.completed = !grocery.completed;

    this.setState({
      groceries: this.state.groceries
    })
  }

  render() {
    let groceriesComponents = [],
        newProductInput,
        newProductAddButton,
        clearListButton;
    for(var index = 0; index < this.state.groceries.length; index++) {
      groceriesComponents.push(
          <GroceryListItem
            grocery={this.state.groceries[index]}
            onComplete={this.toggleGroceryCompleteness.bind(this, index)}
          />
      );
    }
//不理解bind(this)有什么用　 onComplete={this.toggleGroceryCompleteness.bind(this, index)}　黑人问号？？？！！！
// 上面那个方法调用好像是指将这个方法绑定到这个元素上，传进变量index!!!  注意理解
//  这道题到底是要干嘛啊？给每个属性加了一个complete属性。每个 li 上有个onComplete事件，点击之后如何切换？
//  大概意思好像是点击li 标签，实现该元素下complete的切换
    newProductInput = <input className='new-item' type="text" onChange={this.inputChanged}/>;
    newProductAddButton = <button className='add-product' onClick={this.addGroceryItem}>Add new Product</button>;
    clearListButton = <button className='clear-list' onClick={this.clearList}>Clear the List</button>;

    return (
      <div>
        <ul>
          {groceriesComponents}
        </ul>
        {newProductInput}
        {newProductAddButton}
        {clearListButton}
      </div>
    );
  }
}

class GroceryListItem extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    //这个complete主要是切换属性　　onClick方法是怎么回事？父元素中有一个onComplete方法
    let completed = this.props.grocery.completed ? "completed" : '';
    //console.log(completed);
    return (
      <li className={completed} onClick={this.props.onComplete}>
        {this.props.grocery.name}
      </li>
    );
  }
}