用React做一个表单

image.png

项目结构

image.png

是不是感觉挺大的，src目录是开发目录

• 做一个Tabble组件
  代码说明一切，刚学react这就是它的风格没什么好解释的

import React, {Component} from 'react';
import TableHeader from "./TableHeader";
import TableBody from "./TableBody";

class Table extends Component {
    render() {
        console.log(this.props);
        const {characterData,removeCharacter} = this.props

        return(
            <table className="table table-striped">
                <TableHeader />
                <TableBody  characterData= {characterData}
                removeCharacter=
                {removeCharacter}/>
            </table>
        )
    }
}
export default Table

React中有两种组件，容器型组件和提供slot和表现型组件。
点击删除是如何删除的
先看App.js代码

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

class App extends Component {
  state={
     characters:[
      {
        'name':'唐唐',
        'job':'FE'
      },
      {
        'name':'唐马儒',
        'job':'鉴宝师'
      },
      {
        'name':'唐僧',
        'job':'国师'
      }
    ]
    
  }
  render () {
    const {characters}=this.state;
    

    return (
      <div className="container">
        <Table  characterData={characters}
        removeCharacter={this.removeCharacter}/>
        <Form handleSubmit={this.handleSubmit}/>
      </div>
    )
  }
  removeCharacter=index=>{
    const { characters }=this.state;
    this.setState({
      characters:characters.filter(
        (character,i)=>{
          return i!==index
        }
      )
    })
  }
  handleSubmit=character=>{
    this.setState({
      characters:[character,...this.state.characters]
    })
  }
}
export default App

<Table characterData={characters} removeCharacter={this.removeCharacter}/>
Table.js如何获得呢？

import React, {Component} from 'react';
import TableHeader from "./TableHeader";
import TableBody from "./TableBody";

class Table extends Component {
    render() {
        console.log(this.props);
        const {characterData,removeCharacter} = this.props

        return(
            <table className="table table-striped">
                <TableHeader />
                <TableBody  characterData= {characterData}
                removeCharacter={removeCharacter}/>
            </table>
        )
    }
}
export default Table

this.props获取 characters和removeCharacter方法，传递给子组件。const {characterData,removeCharacter} = this.props解构
使用子组件的时候再传递
<TableBody characterData= {characterData} removeCharacter={removeCharacter}/>
子组件在获取，子组件是个表现型组件，方法组件

import React, { Component } from 'react';

const TableBody = (props)=>{
//    console.log(props);
   //函数式组件,纯函数
   console.log(props)
   const rows = props.characterData.map((row,index)=>{
        return(
            <tr key={index}>
                <td>{row.name}</td>
                <td>{row.job}</td>
                <td><a className="btn
                btn-primary" herf="javascript:;
                "onClick={()=>props.removeCharacter(index)}>删除</a>
                </td>
            </tr>
            )
        });
        return <tbody>{rows}</tbody>;
}
export default TableBody

点击删除获取当前点击的数组项下标，利用App.js里的函数删除 ---so easy
提交表单

import React, { Component } from 'react';

class Form extends Component {
  constructor () {
    super();
    // 子组件, state
    this.initialState = {
      name: '',
      job: ''
    };
    this.state = this.initialState;
  }
  render () {
    const { name, job }= this.state;
    console.log(this.state)
    return (
      <form className="form-group">
        <div className="form-field">
          <label>Name</label>
          <input
          className="form-control"  
          type="text"
          value={name}
          name="name"
          onChange={this.handleChange}
          />
        </div>
        <div className="form-field">
          <label>job</label>
          <input
          className="form-control"
          value={job}
          name="job"
          onChange={this.handleChange}
          type="text"/>
        </div>
        <div className="form-field">
            <input type="button"
            value="Submit"
            className="btn btn-primary"
            onClick={()=>{this.submitForm()}}/>
        </div>
      </form>
    );
  }
  submitForm=()=>{
      this.props.handleSubmit(this.state);
      this.setState(this.initialState)
  }
  handleChange = event => {
    const {name , value} = event.target
    console.log(event);
    console.log(name+'------'+value)
    this.setState({
        [name]:value
    })
  }
  componentDidMount(){
      const url='https://en.wikipedia.org/w/api.php?action=opensearch&search=Seona+Dancing&format=json&origin=*';
      fetch(url)
      .then(result=>result.json())
      .then(result=>{
          this.setState({
              data:result
          })
      })
  }
}

export default Form;

组建中删除按钮的点击组件onClick={()=>props.removeCharacter(index)
Form组件中的提交表单按钮点击事件onClick={()=>{this.submitForm()}}
是一样的道理 使this指向组件自身 不指向事件发生时的按钮，从而可以setState（）