简单例子，理解React的props和state

通过一个简单例子，理解React的props和state

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './app.js';
import './index.css';


ReactDOM.render(<App />, document.getElementById('root'))

app.js

import React,{Component} from 'react';
import Table from './table'
import Form from './form';

class App extends Component {

	 state = {
	    characters: []
	 }
		   
	 removeCharacter = index => {
	  const { characters } = this.state

	  this.setState({
	    characters: characters.filter((character, i) => {
	      return i !== index
	    }),
	  })
	}
	
	handleSubmit = character => {
	  this.setState({ characters: [...this.state.characters, character] })
	}

	render() {
	  const { characters } = this.state

	  return (
	    <div className="container">
	      <Table characterData={characters} removeCharacter={this.removeCharacter} />
	      <Form handleSubmit={this.handleSubmit} />
	    </div>
	  )
	}
}

export default App

table.js

import React,{Component} from 'react';

const TableHeader = () => {
  return (
    <thead>
      <tr>
        <th>Name</th>
        <th>Job</th>
        <th>操作</th>
      </tr>
    </thead>
  )
}

const TableBody = props => {
  const rows = props.characterData.map((row, index) => {
    return (
      <tr key={index}>
		  <td>{row.name}</td>
		  <td>{row.job}</td>
		  <td>
		    <button onClick={() => props.removeCharacter(index)}>Delete</button>
		  </td>
	  </tr>
    )
  })

  return <tbody>{rows}</tbody>
}


const Table = props => {
  const { characterData, removeCharacter } = props

  return (
    <table>
      <TableHeader />
      <TableBody characterData={characterData} removeCharacter={removeCharacter} />
    </table>
  )
}

export default Table

form.js

import React, { Component } from 'react'

class Form extends Component {
  initialState = {
    name: '',
    job: '',
  }

  state = this.initialState

  handleChange = event => {
	  const { name, value } = event.target

	  this.setState({
	    [name]: value,
	  })
  }

  submitForm = () => {
	  this.props.handleSubmit(this.state)
	  this.setState(this.initialState)
	}

  render() {
	  const { name, job } = this.state;

	  return (
	    <form>
	      <label htmlFor="name">Name</label>
		      <input
		        type="text"
		        name="name"
		        id="name"
		        value={name}
		        onChange={this.handleChange} />
		      <label htmlFor="job">Job</label>
		      <input
		        type="text"
		        name="job"
		        id="job"
		        value={job}
		        onChange={this.handleChange} />
		      <input type="button" value="Submit" onClick={this.submitForm} />
	    </form>
	  );
	}

}


export default Form;