본문 바로가기

Beautiful Cards

ONE CARD FOR EVERY PROBLEM
From cards designed for blog posts, to product cards or user profiles, you will have many options to choose from. All the cards follow the Now UI Kit style principles and have a design that stands out. We have gone above and beyond with options for you to organise your information.
DEVELOPE/React

React

by gabstory의 닉네임 2020. 4. 18.

There are no plans to remove classes from React. You can read more about the gradual adoption strategy for Hooks in the bottom section of this page.

Hooks don’t replace your knowledge of React concepts. Instead, Hooks provide a more direct API to the React concepts you already know: props, state, context, refs, and lifecycle. As we will show later, Hooks also offer a new powerful way to combine them.

If you just want to start learning Hooks, feel free to jump directly to the next page! You can also keep reading this page to learn more about why we’re adding Hooks, and how we’re going to start using them without rewriting our applications.

 

class Todo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      list: [],
      text: ""
    };
  }

  handleAddItem = e => {
    this.setState({
      list: this.state.list.concat(this.state.text),
      text: ""
    });
  };

  handleChange = e => {
    this.setState({
      text: e.target.value
    });
  };

  removeItem = index => {
    const list = this.state.list;
    this.state.list.splice(index, 1);
    this.setState({ list });
  };

  render() {
    const { text, list } = this.state;
    return (
      <div>
        <h1>TODO LIST</h1>
        <input value={text} onChange={this.handleChange} />
        <button onClick={this.handleAddItem}>Add</button>
        <ol>
          {list.map((item, index) => (
            <li key={index}>
              {item}
              <button onClick={() => this.removeItem(index)}>Delete</button>
            </li>
          ))}
        </ol>
      </div>
    );
  }
}

 

 

 

댓글