通过一个简单例子,理解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;